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K+ X Arvind Ravulavaru 数 月 辛勤 劳作 的 结果 ，Arvind Ravulavaru 是 一 个 勤奋 的 开发 者 和 作 
者 ， 我 和 他 之 前 有 过 多 次 愉快 的 合作 经 历 。 本 书 是 学 习 lonic 一 个 非常 不 错 的 选择 ， 同 时 ， 对 
于 有 经 验 的 开发 者 ， 本 书 也 可 以 使 你 受益 磊 深 。 


Arvind 带 领 大 家 走 遍 整个 lonic 学 习 流程 ， 从 安装 所 需 的 软件 开始 ， 然 后 教会 你 如 何 设置 本 地 
SDK ， 接 着 ，Arvind 带 领 大 家 一 起 学 习 |onic 的 所 有 基础 知识 ， 例 如 |onic 的 组 件 ， 使 用 UI- 
router 导 航 ， 自 定义 样式 ， 以 及 |onic 提 供 的 APl。 有 了 这 些 基本 之 后 ， 作 者 带 着 大 家 制作 了 两 
个 app : 一 个 书店 应 用 ， 和 一 个 实时 聊天 应 用 。 

对 于 有 经 验 的 开发 者 ， 本 书展 示 了 如 何 通过 Cordova 插 件 启 用 设备 的 本 地 API ; 如 何在 
AngularJS 与 语法 中 使 用 ngCordova (lonic 团 队 的 另 一 个 项 目 ) 和 Cordova 插 件 。 

在 聊天 应 用 中 ， 大 家 将 会 看 到 如 何 连接 外 部 数据 库 ， 例 如 Firebase ; 也 可 以 学 习 到 在 终端 设备 
之 间 实 时 同步 数据 。 


在 作为 lonic 的 核心 团队 成 员 加 入 之 前 ， 我 在 另 一 家 公司 工作 ， 在 那里 我 制作 了 一 些 内 部 使 用 
的 混合 app。 在 经 过 对 比 所 有 的 混合 应 用 框架 之 后 ， 我 选择 了 lonic， 因 为 只 有 他 提供 了 完整 
的 混合 移动 开发 解决 方案 。 我 需要 的 所 有 东西 lonic 都 提供 了 。 这 样 一 来 ， 我 就 可 以 专注 的 制 
作 应 用 ， 而 不 用 专注 于 如 何 架 构 应 用 。 ( 注 : build 制作 ; architect 架构 ) ° 


lonic 为 混合 移动 应 用 开发 提供 了 一 套 完 整 的 生态 系统 ， 为 本 地 开发 提供 了 一 套 低 消耗 ， 高 效 
率 的 选择 。 我 们 将 在 5 月 份 发 布 lonic 的 稳定 版 本 ， 然 后 在 夏天 的 时 候 发 布 3 个 平台 服务 的 
alpha 版 本 。 我 们 放 慢 的 打算 ; 我 们 将 会 保持 对 lonic SDK 的 开源 的 强力 支持 。 在 lonic， 我 和 
许多 同事 一 起 工作 ; 同时 我 也 在 世界 各 地 旅行 进行 lonic 布 道 ; 与 Ionic 的 专家 们 一 起 研究 代 
码 。 我 持续 的 被 人 们 多 么 喜爱 这 个 产品 以 及 我 们 有 这 么 一 个 动态 的 和 积极 的 社区 所 感动 。 
你 将 会 发 现 这 是 一 本 伟大 的 lonic 入 门 宝典 。 这 本 书 会 带 你 领略 更 多 的 SDK 知 识 。 谢谢 你 成 为 
我 们 lonic 社 区 的 一 员 。 

好 好 享受 吧 ! 


Mike Hartington 
lonic 核 心 团队 成 员 


关于 作者 


Arvind Ravulavaru 是 一 个 有 着 超过 6 年 软件 开发 经 验 的 全 栈 专 家 。 最 近 2 年 ， 他 广泛 的 涉猎 
了 在 服务 端 和 客户 端的 JavaScript 使 用 。 此 前 ，Arvind 的 从 业经 历 涵盖 了 大 数据 分 析 ， 云 预防 
以 及 管弦 乐 编 曲 。 对 于 很 多 数据 库 他 都 有 不 同 程度 的 研究 ， 并 使 用 HJJava 和 ASP.NET 开 发 和 
架构 了 一 个 应 用 。 


一 年 半 前 ，Arvind 开 始 启 动 了 一 个 名 为 The Jackal of JavaScript 的 博客 
http://thejackalofjavascript.com ， 在 这 里 ， 他 写 了 很 多 关于 使 用 纯 JavaScript 开 发 全 栈 应 用 
的 服务 端 和 客户 端的 经 验 。 他 写 了 很 多 不 同 的 主题 ， 包 括 : DNA 分 析 ， 利 用 JavaScript 进 行 
情绪 分 析 ， 使 用 JavaScript 编 写 Raspberry Pi (HBR? ) ， 和 制作 一 个 基于 WebRTC 的 
node-webkit 视 频 聊 天 客户 端 。 

此 外 ，Arvind 还 为 企业 提供 技术 的 培训 与 指导 服务 。 同时 他 还 在 进行 创业 ， 指 叶 如 何 使 用 时 
下 的 强大 的 工具 栈 进行 快速 原型 开发 。Arvind 还 指导 如 何 将 想法 快速 实现 投放 到 市 场 。 
他 一 直 以 不 同 的 方式 参与 开源 社区 的 贡献 ， 让 世界 更 好 的 去 对 待 开 发 者 。 作 为 一 个 咨询 顾 

问 ，Arvind 一 直 在 尝试 使 用 一 些 很 棒 的 技术 解决 方案 (语言 无 关 ) 去 实现 那些 精彩 的 想法 ， 提 
升 人 类 在 进化 链 里 的 位 置 。 

Arvind 最 近 在 Hyderabad 创 建 他 自己 的 公司 。 公 司 正 在 Internal of Things 空 间 里 制作 自己 的 产 
品 。 公 司 的 目标 是 为 世界 制作 价格 合理 的 loT 产 品 ， 这 样 ， 每 个 人 都 可 以 享受 科技 带 的 生活 改 
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想 要 了 解 Arvind 的 话 ， 可 以 参考 他 的 博客 : http://thejackalofjavascript.com 
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第 一 章 搭载 AngularJS 


lonic 是 使 用 最 广 的 移动 混合 框架 之 一 。 在 写 这 篇 文章 的 时 候 ，lonic 的 Github 目 录 已 经 累计 有 
17,000 个 star 和 2,700 个 fork。 lonic 建 立 在 AngularJS 之 上 ， 是 一 个 用 来 制作 MVW 的 史诗 级 的 
框架 。 本章 是 一 个 介绍 性 的 章节 ， 主 要 是 用 来 介绍 AngularJS 以 及 他 是 如 何 为 lonic 提 供 强 力 
支持 的 。 同 时 我 们 也 会 学 习 几 个 关键 AngularJS 组 件 ， 也 就 是 在 使 用 lonic 的 时 候 会 常用 到 的 
几 个 指令 和 服务 。 


本 书 会 假设 你 对 AngularJS 有 一 个 基本 的 认识 。 如 果 没 有 的 话 ， 建 议 你 先 看 看 
AngularJS Essentials) Rodrigo Branas 或 者 Learning AngularJS, Jack Herrington 的 
视频 ， 这 些 可 以 帮助 你 对 AngularJS 有 个 基本 的 认识 。 


1. 什么 是 关注 点 分 离 
2.，AngularJS 是 如 何 解 决 这 个 问题 的 

3. 什么 AngularJS 内 建 指令 与 自 定 义 指令 

4. 什么 AngularJS 服 务 ， 自 定义 服务 是 怎么 工作 的 
5. lonic 里 面 是 怎样 去 平衡 指令 与 服务 的 


分 节 : 
e 关注 点 分 离 separation of concerns 
e 指令 directives 
e 服务 service 


资源 与 总 结 


X "ES 点 分 a 


尽管 服务 端 应 用 发 展 这 么 多 年 ，Web 演 变 至 今 ， 客 户 端 驱动 应 用 已 经 逐步 超过 服务 端 驱动 应 
用 。 想 当年 ， 服 务 端 告诉 客户 端 eae BP 3a BH Ae Fe ag T EA 


随 着 异步 调用 与 高 交互 网 页 的 快速 发 展 ， 使 用 客户 端 ee。 驱动 能 带 来 更 好 的 用 户 
体验 。 例 如 jQuery 和 Zepto 这 样 的 第 三 方 库 可 以 轻松 帮助 我 们 达到 这 个 目标 。 


举 一 个 经 典 的 例子 为 证 : 用 户 在 文本 框 里 面 输入 数据 ， 然 后 点 击 一 个 Submit 按 钮 。 之 后 这 些 
数据 将 会 经 过 AJAX post 到 服务 端 ， 无 需 刷新 页 面 ，UI 使 用 服务 端 响应 数据 局 部 更 新 即 可 - 


如 果 使 用 jQuery (WARA) 的 话 ， 代 码 如 下 : 


var textBox = $('#textbox'); 
var subBtn = $('#submitBtn'); 
subBtn.on('click', function(e) { 
e.preventDefault(); 
var value = textbox.val().trim(); 
if (!value) { 
alert('Please enter a value'); 
return; 


} 


// 调用 AJAX 请 求 以 获取 服务 端 数据 
var html2Render = ''; 
$.post('/getResults', { 
query: value 
3) 
.done(functioN(data) 1 
// 处 理 返回 结 
var results = data.results; 
for (var i = 0; i < results.length; i++) { 
// 为 每 条 结果 数据 生成 一 个 html 元 素 标 签 
var res = results[i]; 


html2Render += ' < div class = "result" > '; 

html2Render += ' < h2 > ' + res.heading + ' < /h2 >'; 

html2Render += ' < span > ' + res.summary + ' < /span >'; 

html2Render += ' < a href = "' + res.link + '" < ' + res.linkText + ' < /a >'; 
html2Render += ' < /div >' 


} 


// 将 整个 结果 的 html 元 素 添加 到 页 面 上 的 容器 里 面 
$('#resultsContainer').html(html2Render); 


}); 
3) 


以 上 代码 不 可 执行 ， 仅 供 参 考 之 用 。 


当 按 钮 被 点 击 的 时 候 ， 文 本 框 的 值 将 被 post 到 服务 端 。 然后， 前 端 将 会 根据 服务 端 返回 的 结果 
(json 对 象 ) 生成 一 个 html 标 记 ， 注 入 到 结果 容器 里 面 。 


但 是 ， 以 上 代码 的 可 维护 性 如 何 ? 

怎样 才能 测试 其 中 单独 的 代码 片段 呢 ? 比如 ， 测 试 数据 的 验证 工作 是 否 正常 或 者 服务 端 响应 
是 否 正常 。 

假设 我 们 要 对 结果 页 面 进行 更 改 (例如 在 每 个 结果 页 面 之 间 添 加 一 个 favicon 作 为 内 联 图 

标 ) ， 那 么 在 之 前 的 代码 里 面 导 入 这 个 变更 的 难 易 度 又 是 怎样 的 呢 ? 


这 就 是 一 个 分 离 的 关注 点 。 这 些 分 离 点 都 是 存在 于 数据 验证 ， 进 行 AJAX 请 求 和 构建 html 标 记 
之 间 的 。 他 们 之 问 都 是 高 度 耦 合 的 ， 如 果 其 中 一 个 break 掉 了 ， 所 有 其 他 的 都 会 break， 上 述 
所 有 代码 就 都 无 法 重用 了 。 


如 果 我 们 把 上 述 代 码 分 离 成 不 同 的 组 件 ， 那 么 到 最 后 我 们 将 会 得 到 一 个 Model View 
Controller (MVC) 架构 。 在 典型 的 MVC 架 构 中 ，model 是 存放 数据 的 地 方 ，controller 是 在 
把 数据 展示 到 view 之 前 对 数据 进行 处 理 (原作 : massage 马 杀 鸡 ， 按 摩 ) 的 地 方 。 

与 服务 端 MVC 不 同 的 是 ， 客 户 端 MVC 有 一 个 额外 的 组 件 名 为 router (路 由 器 ) 。 路 由 器 一 般 
是 页 面 的 URL， 用 来 指示 需要 加 载 哪 个 model/view/controller » 


这 就 是 AngularJS 背 后 的 基本 理念 ， 也 是 他 如 何在 提供 单 页 面 应 用 架构 的 同时 分 离 了 关注 点 。 


在 前 面 的 示例 中 ， 服 务 端 交互 层 (AJAX) 将 会 从 主 代码 中 分 离 出 来 ， 然 后 根据 需求 与 某 个 


fase 


controllerz# 4T & Z ° 


在 理解 了 这 些 之 后 ， 我 们 现在 将 要 快速 学 习 几 个 AngularJS 关 键 组 件 。 


AngularJS 组 件 


与 大 部 分 客户 端 JavaScript 框 架 不 同 的 是 ， AngularJS 是 从 HTML 驱 动 的 。 在 一 个 标准 的 网 页 
中 ，AngularJS 负 责 在 各 个 关键 代码 片 之 间 进 行 连接 。 所 以 ， 当 你 想 要 为 你 的 HTML 页 面 添加 
一 些 AngularJS 指 令 并 且 包 含 AngularJS 的 时 候 ， 你 可 以 不 用 写 一 行 代码 就 能 够 轻松 加 愉快 的 
搞定 一 个 简单 的 应 用 。 


为 了 证 明 我 不 是 吹牛 ， 我 们 将 构建 一 个 带 验 证 功能 的 没有 一 行 JavaScript 代 码 的 登录 表单 : 


«html ng-app=""> 
«head» 
«script src-"angular.min.js" type="text/JavaScript"></script> 
«head» 
«body» 
<hi>Login Form</h1> 
<form name="form" method="POST" action="/authenticate"> 
<label>Email Address</label> 
<input type="email" name="email" ng-model="email" required> 
<label>Password</label> 
<input type="password" name="password" ng-model="password" required> 
<input type="submit" ng-disabled="!email || !password" value="Login"> 
</form> 
</body> 
</html> 


上 面 的 的 代码 片段 中 ， 以 hg- 开头 的 属性 叫做 AngularJS 指 令 。 


ERE > ng-disable 指令 的 职责 是 当 输 入 的 e-mail 和 password 的 值 无 效 时 启用 Submit 的 
disabled 属 性 。 


同时 ， 指 令 的 范围 被 安全 的 限制 到 了 他 声明 的 元 件 以 及 他 的 子 元 件 的 范围 内 。 这 里 解决 了 
JavaScript 语 言 的 另 一 个 关键 性 问题 : 如 果 没 有 正确 的 声明 一 个 变量 ， 那 么 他 就 会 被 附加 到 
Global Object > 4,35€ Window Object ° 
如 果 你 对 范围 《scope， 范 围 或 者 作用 域 ) 一 无 所 知 ， 那 么 建议 你 先 浏览 
https://docs. anaes org/guide/scope ° 如 果 你 对 scope 和 root scope 没 有 正确 的 认识 的 
话 ， 那 么 本 书 学 起 来 将 会 非常 的 难 。 
现在 ， 我 们 将 会 进行 到 下 一 个 AngularJS 组 件 ， + Dependeney Injection (DI > 依赖 注 
A) 。DI 负 责 在 有 需求 的 的 地 方 注入 相应 的 代码 片 。 这 也 是 关注 点 分 离 的 关键 促成 点 之 一 。 


你 可 以 根据 需求 注入 不 同 的 AngularJS 组 件 。 例 如 ， 你 可 以 在 controller 里 面 注 入 一 个 service。 


Dl 是 AngularJS 中 另 一 个 你 必须 了 解 的 核心 组 件 。 关 于 DI 的 具体 信息 ， 可 以 查 
看 : https://docs.angularjs.org/guide/di 


为 了 便于 理解 service 和 controller， 我 们 回 退 一 步 。 在 一 个 典型 的 客户 端 MVC 框 架 中 ， 我 们 知 
道 model 存 放 数 据 ，vVview 展 示 数 据 ，controller 处 理 model 里 面 的 数据 并 展示 到 View © 
在 AngularJS 中 ， 你 可 以 这 么 理解 上 面 的 信息 : 


e HTML - Views 
e AngularJS 控制 器 - Controllers 
e Scope 对 象 - Model 


在 AngularJS 中 ，HTML 充 当 模 块 媒介 的 角色 。AngularJS 控 制 器 从 scope 对 象 中 或 者 服务 的 响 
应 数据 中 取得 数据 ， 然 后 将 它们 组 合成 最 终 的 view 展 示 到 网 页 上 。 这 和 我 们 在 搜索 范例 中 做 
的 非常 类 似 ， 我 们 通过 遍历 结果 ， 构 建 HTML 字 符 串 ， 然 后 将 他 注入 到 DOM 中 。 在 这 里 ， 你 
可 以 看 到 ， 我 们 将 功能 分 离 到 不 同 的 组 件 中 去 了 。 重申 一 下 ，HTML 页 面 表演 的 角色 是 模 

板 ，factory 组 件 负责 发 起 AJAX 请 求 。 最 终 ，controller 负 责 将 factory 的 数据 传递 到 view，view 
会 生成 实际 Ul 。 


AngularJS 版 本 的 搜索 范例 如 下 。 


index.html 应 该 是 这 样 的 : 


«html ng-app="searchApp"> 
«head» 
«script src="angular.min.js" type="text/JavaScript"> 
<script src="app.js" type="text/JavaScript"> 
</head> 
<body ng-controller-"AppCtrl"- 
<hi>Search Page</h1> 
<form> 
<label>Search : </label> 
<input type="text" name="query" ng-model="query" required> 
«input type="button" ng-disabled-"!query" value="Search" ng-click="Search( 


)"> 
</form> 
<div ng-repeat="res in results"> 
<h2>{{res.heading}}</h2> 
<span>{{res.summary}}</span> 
«a ng-href="{{res.link}}">{{res.linkText}}</a> 
</div> 

</body> 
</html> 


app. js Æ 3x 4E 84 : 


var searchApp - angular.module('searchApp', []); 
searchApp.factory('ResultsFactory', ['$http', function($http) { 
return { 
getResults : function(query) { 
return $http.post('/getResults', query); 
} 
}; 
}1); 


searchApp.controller('AppCtrl', ['$scope', 'ResultsFactory', function($scope, ResultsFac 
tory) { 
$scope.query = ''; 
$scope.results = []; 
$scope.search = function(){ 
var gq = { 
query : $scope.query 


un 


ResultsFactory.getResults(q).then(function( response) { 
$scope.results = response.data.results; 


3); 
} 
11: 


在 AngularJS 中 ，factory 组 件 和 service 组 件 是 交互 使 用 的 。 想 要 更 好 的 理解 ， 请 参考 
stack overflow 里 面 的 一 个 讨 

论 : http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs- 
factory 


jaex.htm/ 是 由 HTML 模 板 组 成 的 。 当 页 面 加 载 时 ， 模 板 默认 ( 打 死 我 也 不 会 说 缺 省 ) 是 隐藏 


的 。 当 结果 数组 发 出 数据 的 时 候 ， 模 板 将 通过 ng-repeat 指 令 生 成 html 标 记 。 


在 app.js 中 ， 我 们 先 创建 一 个 名 为 searchApp 的 AngularJS 模 组 。 然 后 我 们 创建 了 一 个 叫 

做 ResultsFactory 的 工厂 ， 这 个 工厂 的 唯一 作用 是 发 起 AJAX 请 求 返 回 一 个 promise。 最 后 ， 
我 们 创建 了 一 个 controller， 名 为 AppCtr1， 用 于 与 factory 会 作 更 新 视图 。 

如 果 你 对 promise 一 无 所 知 ， 参 考 : http://www.dwmkerr.com/promises-in-angularjs-the- 
definitive-guide/ 


按钮 上 ng-click 指 令 声明 的 search 在 AppCtrl 中 已 经 设置 好 了 。 这 个 按钮 只 有 在 搜索 框 里 面 输入 


有 效 数 据 的 时 候 才 会 启用 。 当 点 击 Search 按 钮 的 时 候 ，controller 里 面 注 册 的 事件 监听 器 将 会 


被 调用 。 这 里 我 们 将 创建 服务 端 需要 的 query 对 象 以 推进 和 调用 ResultFactory 里 面 的 
getResults 方 法 。getResults 方 法 返回 一 个 promise， 这 个 promise 对 象 在 服务 端 响 应 返回 之 后 
才 可 以 被 解析 。 假设 服务 端 响 应 成 功 ， 我 们 会 把 服务 端 返 回 的 搜索 结果 传 入 $scope.results。 


SSscope 对 象 的 变更 将 触发 TesUlts 里 面 所 有 实例 的 更 新 。 这 样 一 来 就 触发 了 HTML 模 板 上 的 mg- 
1epeat 指 令 ， 然 后 这 个 指令 解析 新 的 results 数 组 ， 生 成 html 标 记 。 这 样 ，UI 上 就 成 功 的 显示 了 
最 新 的 搜索 结果 。 


下 载 范例 代码 或 者 咨询 作者 ， 请 访问 Github : Github 地 址 :https://github.com/learning- 
ionic/Chapter-1 


上 面 的 范例 给 你 展示 了 如 何 有 序 推进 你 的 代码 架构 ， 使 你 的 代码 可 维护 ， 可 测试 。 现 在 ， 如 
果 想 要 在 每 个 搜索 结果 之 间 插 入 一 个 图 片 这 样 的 需求 就 变 得 非常 简单 了 。 


AngularJS 指令 


3| F] E AngularJS 3S : 


"At a high level, directives are markers on a DOM element (such as an attribute, 
element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) 
to attach a specifed behavior to that DOM element or even transform the DOM element 
and its children." 


指令 是 一 个 高 级 别 的 DOM 元 素 (例如 一 个 属性 ， 元 素 名 ， 备 注 或 者 CSS 类 ) 的 制作 者 ， 
告诉 AngularJS 的 HTML 编 译 器 ($compiler) 给 对 应 的 DOM 元 素 添加 指定 的 行为 或 者 转 
变 DOM 元 素 和 他 的 子 元 素 


当 你 想 要 在 网 页 上 抽 离 出 公用 功能 的 时 候 ， 这 是 一 个 非常 有 用 的 特性 。AngularJ 的 指令 已 经 
达成 了 这 些 功能 ， 例 如 : 


e ng-app : 在 没有 传 入 值 的 时 候 ， 这 个 指令 初始 化 一 个 新 的 默认 的 AngularJS 模 块 ; RZ? 
会 初始 化 一 个 有 名 字 的 模块 。 

e ng-model : 将 输入 的 元 素 的 值 映 射 到 当前 scope 

e ng-show: 当 传 递 给 ng-show 的 表达 式 的 值 为 true 的 时 候 ， 显 示 对 应 的 DOM 元 素 。 

人 

e ng-repeat : 这 条 指令 根据 传 入 的 表达 式 迭 代 当 前 标签 以 及 他 的 子 元 素 。 


回想 我 们 之 前 创建 的 Search App， 想 象 一 下 应 用 中 还 有 很 多 其 他 页 面 需 要 用 到 这 个 搜索 表 
Bo fA > MHZ RULERS o 

此 时 ， 我 们 可 以 将 这 个 表单 功能 抽 离 成 一 个 自 定义 的 指令 ， 而 不 是 去 复制 粘贴 controller 和 
HTML 模 板 代 码 。 


然后 你 就 可 以 在 DOM 元 素 的 属性 里 用 到 一 条 新 的 指令 ， 例 如 
， 或 者 你 可 以 创建 你 自己 的 标签 或 元 件 ， 例 如 </my-search>。 


ue 只 用 写 一 遍 搜 索 功 能 ， 然 后 就 可 以 各 处 使 用 。AngularJS 负 责 在 进入 view 的 时 候 初 始 化 
' 在 离开 view 的 时 候 销 毁 指 令 。 


我 们 将 会 为 Search App 创 建 一 个 名 为 my-search 的 新 指令 。 这 条 指令 的 唯一 功能 ae 
文本 框 和 一 个 按钮 。 当 点 击 Search 按 钮 的 时 候 ， 我 们 将 会 拿 取 结果 然后 将 它们 展示 到 搜 
单 下 面 。 


个 
索 表 
现在 开工 。 


和 其 他 AngularJS 组 件 一 样 ， 所 有 的 指令 都 绑 定 到 一 个 模块 。 在 咱们 的 案例 中 ， 我 们 已 经 有 一 
个 名 叫 searchApp 的 模块 。 我 们 将 绑 定 一 条 新 的 指令 到 这 个 模块 : 


searchApp.directive('mySearch', [function () { 
return { 
template : 'This is Search template', 
restrict: VEL, 
link: function (scope, iElement, iAttrs) { 


} 
}; 
}1); 


这 条 指令 名 为 mySearch， 命 名 方式 的 驼峰 式 。 当 在 HTML 中 使 用 指 条 指令 的 时 候 ，AngularJS 
将 负责 用 my-search 匹 配 这 条 指令 。 我 们 将 在 templjate 属 性 中 设置 一 个 范例 文本 。 我 们 限制 此 
间 令 用 作为 元 素 (E) 类 型 。 


AngularJS 里 面 其 他 可 以 限制 的 值 是 A_ (attribute 属性 ，) C(class €) ， 以 及 
M (comment 备注 ) 。 你 也 可 以 允许 指令 使 用 所 有 的 4 个 格式 (ACEM) 


我 们 创建 了 一 个 链接 方法 。 每 当 指令 进入 到 view 的 时 候 ， 这 个 方法 都 会 被 调用 。 这 个 方法 有 
以 下 3 个 参数 注入 其 中 : 


e scope: 这 个 参数 规定 了 这 个 标签 在 DOM 里 面 的 范围 。 例 如 ， 他 可 以 在 AppCtrl 里 面 ， 其 
至 直接 在 rootScope(ng-app) 里 面 。 

e iElement : 指令 附加 到 的 宿主 元 素 

e iAttrs : 当前 元 素 的 所 有 属性 。 


在 我 们 的 指令 中 ， 我 们 不 会 使 用 iAttrs ， 因 为 我 们 的 my-search 标 签 上 没有 属性 。 在 复杂 的 指 
令 当 中 ， 最 好 的 做 法 是 将 你 的 指令 模板 抽 离 成 另 一 个 文件 ， 然 后 在 指令 中 使 用 templateUrl 来 
引用 他 。 接 下 来 ， 我 们 就 使 用 这 种 做 法 。 

在 index.html 的 同一 目录 下 ， 新 建 一 个 文件 名 为 qirective.html， 然 后 添加 以 下 内 容 : 


<form> 
<label>Search : </label> 
<input type="text" name="query" ng-model="query" required»; 
<input type="button" ng-disabled="!query" value="Search" ngclick-"search()"» 
</form> 
<div ng-repeat="res in results"> 
<h2>{{res.heading}}</h2> 
<span>{{res.summary}}</span> 
«a ng-href="{{res.link}}">{{res.linkText}}</a> 
</div> 


就 这 么 简单 ， 我 们 在 jaex.htn/ 使 用 这 条 指令 替换 相应 的 搜索 代码 。 现在， 我 们 将 会 在 指令 内 
部 给 按钮 注册 一 个 click 事 件 监听 器 。 更 新 后 的 指令 如 下 : 


searchApp.directive('mySearch', [function() { 
return { 
templateUrl: './directive.html', 
restrict: 'E', 
link: function postLink(scope, iElement, iAttrs) { 
scope.search = function() { 
var q= { 
query : scope.query 


N 
//Interact with the factory (next step) 


} 
}; 
31) 


如 上 代码 所 示 ， 当 按钮 的 click 事 件 触发 之 后 执行 了 scope.Search，Scope.guey 返 回 了 文本 框 
的 值 。 这 跟 我 们 在 控制 器 里 面 做 的 差不多 。 


现在 ， 当 用 户 在 输入 一 些 文本 然后 点 击 Search 按 钮 的 时 候 ， 我 们 会 调用 ResultFactory 里 的 
getResults 方 法 。 然 后 ， 一 旦 结果 返回 ， 我 们 将 会 把 他 们 绪 定 到 scope 的 results 属 性 上 。 完整 
的 指令 代码 如 下 : 


searchApp.directive('mySearch', ['ResultsFactory', 
function(ResultsFactory) ( 
return { 
templateUrl: './directive.html', 
restrict: VEL, 
link: function postLink(scope, iElement, iAttrs) { 
scope.search = function() { 
var q = { 
query : scope.query 
}; 
ResultsFactory.getResults(q).then(function(response) { 
scope.results = response.data.results; 


3): 


} 
31) 


有 了 这 些 ， 我 们 可 以 将 index.html 更 新 为 : 


«html ng-app-"searchApp"» 

«head» 
«script src-"angular.min.js" type="text/JavaScript"></script> 
«script src-"app.js" type="text/JavaScript"></script> 

</head> 

<body> 
«my - search></my -search> 

</body> 

</html> 


然后 app.js 更 新 为 以 下 : 


var searchApp = angular.module('searchApp', []); 


searchApp.factory('ResultsFactory', ['$http', function($http){ 
return { 
getResults : function(query){ 
return $http.post('/getResults', query); 
} 
}; 
31); 
searchApp.directive('mySearch', ['ResultsFactory',function(ResultsFactory) ( 
return { 
templateUrl: './directive.html', 
restrict: 'E', 
link: function postLink(scope, iElement, iAttrs) { 
scope.search = function() { 
var q= { 
query : scope.query 
}; 
ResultsFactory.getResults(q). 
then(function(response) { 
scope.results = response.data.results; 


3); 


} 
H 
1: 


异常 简单 ， 但 是 非常 强大 | 

现在 ， o ek bdo Pak UM. 时 候 ， 直 接 扔 一 个 </my-search> 就 可 以 了 。 

你 也 可 以 给 这 条 指令 进行 升级 : 给 他 传 入 一 个 名 为 results-target 的 属性 。 这 实 T 
某 元 素 的 ID © ed 可 以 在 这 个 提供 的 元 素 里 面 显示 结果 ， 而 不 是 像 之 前 那样 在 搜索 条 
面 显 示 结 果 。 


AngularJS 自 带 一 个 轻 量 版 本 的 jQuery 库 名 为 jqLite。 jqLite 不 支持 选择 器 查询 。 如 果 你 想 
要 用 jQuery 替代 jqLite 的 话 ， 那 么 需要 在 AngularJS 之 前 添加 jQuery。 更 多 关于 jqLite 的 信 
息 请 参考 : https://docs.angularjs.org/api/ng/function/angular.element 


在 处 理 DOM 元 素 的 时 候 ， 这 个 特殊 功能 使 得 AngularJS 指 令 成 为 组 件 重用 的 完美 解决 方案 。 


此 时 ， 当 你 需要 给 你 的 lonic app 添 加 一 个 新 的 导航 条 的 时 候 ， 你 只 需要 扔 一 个 ion-nav-bar 标 
签 进 去 就 可 以 了 ， 如 下 : 


«ion-nav-bar class="bar-positive"> 
<ion-nav-back-button> 
</ion-nav-back-button> 

</ion-nav-bar> 


然后 ， 一 切 将 会 尘埃 落 定 。 
当 我 们 回首 理解 自 定 义 指令 的 痛苦 的 时 候 ， 你 将 会 很 容易 的 的 联想 到 所 有 由 AngularJS 指 令 所 
创建 的 lonic 组 件 。 


AngularJS 服务 


用 到 的 名 词 : 


e directives 指令 

e controller 控制 器 

e Dependency Injection 依赖 注入 
e lazy initialize 延迟 初始 化 

e singlton 单 例 

e destroy 销毁 

e factory 工厂 

e local storage 本 地 存储 


leer a s Ut 与 控制 器 里 。 
这 些 对 象 是 由 一 系列 的 简单 业务 逻辑 碎片 组 成 。 


当 组 件 需 要 依赖 他 们 的 时 候 ，AngularJS 服 务 都 会 延迟 初始 化 。 同 时 ， 所 有 的 服务 都 是 单 例 ， 
单 例 的 意思 是 在 每 个 app 里 面 仅 初 始 化 一 次 。 
这 样 可 以 让 服务 在 控制 器 之 间 完 美的 共享 数据 ， 并 根据 需求 将 他 们 存 入 缓存 。 


Sintervalz€ — ^- AngularJS/R 4- ° Sintervalfe setTimelnterval() un 的 。 在 注册 这 个 服务 的 时 
候 ， 他 将 setTimelnterval() 包 装 起 来 并 且 返 回 一 个 promise 对 象 。 这 个 promise 后 续 可 以 用 来 销 
9 Sinterval ° 


另 一 个 比较 简单 的 服务 是 glog。 这 个 服务 将 日 志 信 息 输 出 到 浏览 器 控制 台 。 来 个 比较 简单 的 例 
AX: 


myApp.controller('logCtrl', ['$log', function($log) { 
$log.log('Log Ctrl Initialized'); 
11 


由 此 ， 可 以 看 到 服务 的 强大 之 处 以 及 理解 业务 逻辑 碎片 是 如 何在 整个 app 中 重用 的 。 


你 也 可 以 自 定义 自己 的 服务 。 例 如 建 一 个 计算 器 服务 试 试看 ， 包 括 了 加 ， 减 ， 乘 ， 除 ， 平 方 


等 等 方法 。 


回 到 我 们 的 搜索 App， 我 们 使 用 了 一 个 工厂 负责 服务 端 通讯 。 现 在 ， 我 们 将 添加 我 们 自己 的 服 


务 。 


服务 与 工厂 组 件 之 间 是 可 以 互 换 的 。 可 以 参考 这 里 : 
http://stackoverflow.com/questions/15666048/servicevs-provider-vs-factory 


例如 ， 当 用 户 搜索 指定 关键 字 然 后 展示 搜索 结果 的 时 候 ， 我 们 比较 倾向 于 将 结果 缓存 中 本 
地 。 这样 可 以 保证 下 次 用 户 搜索 同一 个 关键 字 的 时 候 ， 我 们 无 需 发 起 AJAX 请 求 ， 而 是 直接 展 
示 本 地 存储 中 的 数据 (和 离线 模式 类 似 ) © 


我 们 就 这 么 设计 我 们 的 服务 。 我 们 的 服务 将 包含 以 下 三 个 方法 : 


e isLocalStorageAvailiable(): 这 个 方法 检查 浏览 器 是 否 支持 本 地 存储 API 

e saveSearchResult(keyword, searchResult): 这 个 方法 将 关键 字 和 搜索 结果 存放 到 本 地 存 
储 

e isResultPresent(keyword): 这 个 方法 返回 指定 关键 字 的 搜索 结果 


我 们 的 服务 大 概 是 这 样 的 : 


searchApp.service('LocalStorageAPI', [function() { 
this.isLocalStorageAvailable = function() { 
return (typeof(localStorage) !-- "undefined"); 
H 
this.saveSearchResult = function(keyword, searchResult) { 
return localStorage.setItem(keyword, JSON.stringify(searchResult)); 
}; 
this.isResultPresent = function(keyword) { 
return JSON.parse(localStorage.getItem( keyword) ); 
}; 
31; 


本 地 存储 不 能 存储 对 象 。 因 此 ， 我 们 必须 在 缓存 对 象 之 前 将 其 字符 串 化 ， 在 获得 本 地 组 
存 的 时 候 对 象 化 。 


现在 ， 当 我 们 处 理 搜索 的 时 候 ， 我 们 的 指令 将 会 使 用 这 个 服务 。 更 新 后 的 mySearch 指 令 是 这 
样子 的 : 


searchApp.directive('mySearch', ['ResultsFactory', 'LocalStorageAPI', 
function(ResultsFactory, LocalStorageAPI) { 
return { 
templateUrl: './directive.html', 
nestnici s EL 
link: function postLink(scope, iElement, iAttrs) { 
var lsAvailable - LocalStorageAPI.isLocalStorageAvailable(); 
scope.search = function() { 
if (lsAvailable) { 
var results = LocalStorageAPI.isResultPresent(scope.query); 
if (results) { 
scope.results = results; 


return; 
} 
} 
var q= { 
query: scope.query 
}; 


ResultsFactory.getResults(q). 
then(function(response) { 
scope.results = response.data.results; 
if (lsAvailable) { 
LocalStorageAPI.saveSearchResult(scope.query, data.data.result 


s); 


3); 


Nu 
3; 


之 前 说 过 ， 我 们 会 先 检查 本 地 存储 是 否 可 用 ， 然 后 使 用 LocalSiorageAP/ 服 务 进行 数据 的 存 与 
取 。 


同样 ，lonic 也 提供 了 自 定 义 的 服务 供 我 们 去 消化 。 详 细 信 息 我 们 可 以 去 第 五 章 - /omic 指 令 与 
服务 查看 。 

下 面 这 个 例子 是 lonic 的 加 载 服 务 。 这 个 服务 展示 了 一 个 加 载 条 和 你 提供 的 文本 。 例 子 代码 大 
概 是 这 样子 的 : 


$ionicLoading.show({ 
template: 'Loading...' 


3); 


然后 你 就 可 以 看 到 一 个 覆盖 层 (overlay) 展示 后 台 活动 并 阻 断 用户 操 作 。 


AngularJS 资源 


用 到 的 名 词 : 


e service 服务 

e factory 工厂 

e piece of code 代码 片 

e HTML element html 元 素 

e mobile hybrid app 移动 混合 应 用 
以 下 推荐 一 些 非常 有 价值 的 Github 资 源 ， 看 完 他 们 你 就 会 知道 AngularJS 世 界 里 最 强 与 最 新 的 
东西 是 什么 : 


e jmcunningham/AngularJS-Learning https://github.com/jmcunningham/AngularJS- 


Learning 
e gianarb/awesome-angularjs https://github.com/gianarb/awesomeangularjs 
e aruzmeister/awesome-angular https://github.com/aruzmeister/awesome-angular 


注意 : 本 书 使 用 的 是 lonic 1.0.0 > AngularJS 49 & 4 x 1.3.13 


Ry 2S 

在 本 章 中 我 们 看 到 了 AngularJS 是 如 何 设计 以 达成 关注 点 分 离 。 然后 快速 学 习 了 我 们 在 lonic 

开发 中 将 要 用 到 的 一 些 关键 的 AngularJS 组 件 。 也 学 习 了 如 何 创建 自 定 义 服 务 和 指令 以 及 他 们 

的 使 用 。 在 使 用 AngularJS 的 时 候 ， 创 建 可 重用 的 代码 片 的 首要 原则 是 : 当 处 理 HTML 元 素 
(DOM) 的 时 候 ， 使 用 指令 ; 其 他 情况 下 用 服务 或 者 工厂 。 


你 也 理解 了 lonic 是 如 何 使 用 AngularJS 元 件 暴 露出 来 的 简单 的 多 用 的 API 去 创建 移动 混合 应 
用 。 

下 一 章 里 面 ， 我 们 将 会 介绍 lonic。 你 将 学 会 如 何 设置 他 们 ， 如 何 利 用 他 创建 一 个 基本 的 应 
用 ， 以 及 理解 项 目 架 构 。 同时 也 会 带 你 领略 一 下 开发 移动 混合 应 用 的 大 观 。 


欢迎 来 到 lonic 


在 上 一 章 中 ， 我 们 学 习 了 一 些 AngularJS 的 关键 特性 ， 也 就 是 指令 和 服务 。 在 本 章 中 ， 我 们 将 
探索 移动 混合 应 用 的 蓝图 ， 安 装 开发 onic 应 用 必需 的 软件 ， 最 终 搭建 一 些 应 用 。 


本 章 涵 盖 主 题 如 下 : 


e 移动 混合 架构 

e 什么 是 Aphache Cordova 

e 什么 是 lonic 

e 安装 开发 和 运行 lonic 应 用 需要 的 工具 
使 用 lonic 模 块 进行 工作 

e Yeoman lonic Generator 


用 到 的 名 词 


e Mobile Hybrid platform 移动 混合 平台 
e apps/application 应 用 

e package 封包 

e installer 安装 包 

e Hybrid App 混合 应 用 


移动 混合 架构 


在 使 用 lonic 工 作 之 前 ， 我 们 需要 了 解 一 下 移动 混合 平台 的 形势 。 


这 个 概念 非常 简单 。 几乎 每 一 个 移动 操作 系统 (使 用 Cordova 的 时 候 也 叫做 平台 ) 都 有 开发 
应 用 的 API。 这 个 API 组 成 了 一 个 叫做 Web View 的 组 件 。 一 个 Web View 基 本 就 是 运行 在 一 个 
移动 应 用 里 面 的 浏览 器 。 这 个 浏览 器 运行 HTML,CSS， 以 及 JS 代码 。 这 意味 这 你 可 以 使 用 前 
面 的 技术 创建 网 页 ， 然后 在 你 的 应 用 里 面 执行 o 


你 可 以 使 用 web 开 发 的 知识 来 开发 本 地 -混合 移动 应 用 (此 处 的 本 地 的 意思 是 在 应 用 与 他 的 素 
材 打 包 后 安装 为 平台 特定 的 格式 文件 ) ， 例 如 : 


e Android 使 用 Android Application Package(.apk) 

e iOS 使 用 iPhone Application Archive(.ipa) 

e Windows Phone 使 用 Application Package(.xap) 
封包 /安装 包 是 由 一 些 本 地 代码 片 组 成 ， 这 些 代码 片 负责 初始 化 网 页 和 其 他 显示 网 页 内 容 所 需 
的 所 有 素材 。 


一 系列 展示 移动 应 用 容器 里 面 的 你 的 应 用 业务 逻辑 的 网 页 的 东西 ， 就 叫做 混合 应 用 。 


2.2 什么 是 Apache Cordova 


4+ 4 x Aphache Cordova 


简单 来 讲 ，Cordova 是 将 你 的 网 页 应 用 与 本 地 应 用 缝合 的 软件 。 
Apache Cordova 上 面 是 这 么 声明 的 : 


Apache Cordova is a platform for building native mobile applications using HTML, CSS 
and JavaScript. Apache Cordova 是 一 个 使 用 HTML,CSS,JavaScript 制 作 本 地 移动 应 用 的 
平台 。 


Apache Cordova 不 止 是 缝合 网 页 应 用 和 本 地 应 用 那么 简单 ， 他 同时 也 提供 了 一 套 JavaScript 
写 的 API 用 来 与 设备 的 本 地 功能 进行 交互 。 是 的 ， 你 可 以 通过 JavaScript 调 用 你 的 摄像 关 ， 照 
相 ， 然 后 发 送 到 e-mail。 属 不必? 


为 了 让 你 理解 这 其 中 其 中 缘由 ， 我 们 可 以 看 一 下 下 面 这 张 图 : 





WEB VIEW 
(HTML/CSS/JS) 





可 以 看 到 ， 我 们 有 一 个 执行 HTML/CSS/JS 代 码 的 web view。 这 些 代码 可 以 只 是 简单 独立 的 用 
户 界面 片段 ; 可 以 说 向 远程 服务 器 请 求 数 据 而 发 送 的 AJAX 请 求 。 甚 至 ， 这 些 代码 可 以 做 更 多 
的 事情 ， 例 如 直接 跟 蓝 牙 对 话 ， 取 得 附近 的 蓝牙 设备 列表 。 


关于 本 章 ， 你 可 以 通过 以 下 Github 地 址 获取 源 代 码 ， 发 起 jssue， 和 作者 沟 
通 https://github.com/learning-ionic/Chapter-2 
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在 后 续 的 用 例 当 中 ，Cordova 有 一 系列 的 使 用 的 JavaScript 与 Web view 交 互 然后 与 设备 本 地 语 
言 (例如 ，Android 的 Java) 交流 ， 从 而 提供 在 他 们 之 间 建 立 桥 梁 的 APl。 例如， 如 果 你 想 知 


道 你 的 app 中 的 JavaScript 是 运行 在 何 种 设备 上 的 ， 你 只 需要 在 你 的 JS 文件 里 面 使 用 以 下 代码 
就 可 以 实现 : 


var platform = device.platform; 


安装 好 设备 插件 之 后 ， 你 还 可 以 通过 JavaScript 访 问 UUID，model，OS 版 本 ， 以 及 设备 内 部 
web view 使 用 的 Cordova 版 本 : … var uuid = device.uuid; var model = device.model; var 
version = device.version; var Cordova = device.Cordova; … 
J& «& 55 & 3€ * CorfovafengCordova Ri] Atk Ff] E 2 49 Cordovadé tHig o 
前 面 的 解说 是 为 了 给 你 一 个 大 概 的 了 解 ， 移 动 混合 应 用 是 如 何 构建 的 ， 你 在 web view €. dad» 
何 通 过 JavaScript 使 用 设备 功能 的 。 

Cordova 4 2: HTML ，CSS, 以 及 JS 代码 转换 为 系统 指定 的 二 进 制 代码 。 他 做 的 工作 是 

包装 HTML,CSS,JS 代 码 然 后 在 web view 里 面 执行 他 们 。 
那么 ， 你 现在 可 能 开始 想到 了 ，lonic 是 将 创建 好 HTML/CSS/JS 代 码 运 行 在 Web view 里 面 并 
且 与 Cordova 对 话 以 访问 设备 指定 API 的 一 个 框架 。 


用 到 的 名 词 


e Command Line Interface (CLI) 命令 行 界 面 


什么 是 lonic 


lonic 是 一 个 漂亮 的 ， 开 源 的 ， 前 端 SDK， 它 使 用 HTML 开 发 混合 移动 应 用 。 为 了 高 交互 应 
用 ，lonic 提 供 了 为 移动 应 用 优化 过 的 的 HTML ，CSS， 以 及 JS 组 件 ， 同 时 还 有 优化 过 的 手势 
和 工具 。 


与 本 联盟 的 其 他 框架 对 比 ， 在 lonic 使 用 了 最 小 化 DOM 操 作 和 硬件 加 速 过 度 之 后 ， 他 的 执行 效 
HART AM © lonic 使 用 AngularJS 作 为 他 的 JavaScript 框 架 。 


如 lonic 这 般 镍 有 AngularJS 的 强力 的 框架 ， 一 切 变 得 尼 有 可 能 (你 可 以 在 lonic 里 面 使 用 任何 
AngularJS 组 件 ) ° lonic 和 Cordova 设 备 API 有 完美 整合 。 这 意味 着 ， 你 可 以 使 用 例如 
ngCordova 这 样 的 的 库 去 访问 设备 API 然 后 将 他 与 Ionic 美 丽 的 用 户 界面 组 件 整 合 起 来 。 lonic 
有 他 自己 的 命令 行 界 面 ， 可 以 用 作 搭 建 ， 开 发 以 及 部 署 lonic 应 用 。 在 使 用 lonic CLI 工 作 之 
前 ， 我 们 需要 安装 一 些 软件 。 


软件 安装 


现在 我 们 要 开始 安装 运行 lonic 应 用 所 必需 的 软件 了 。 


安装 Node.js 


由 于 lonic 的 命令 行 工 具 和 构建 任务 需要 用 到 Node.js， 那 么 我 们 第 一 个 需要 安装 的 就 是 他 了 : 


1， 导 航 至 网 站 https://nodejs.org/ 

2， 点 击 主 页 上 的 安装 按钮 就 会 自动 下 载 你 当前 操作 系统 对 于 的 安装 包 。 或 者 可 以 导航 到 
https://nodejs.org/download 然后 下 载 指定 的 副本 。 

3. 直接 执行 安装 包 就 可 以 安装 Node.js 了 


为 了 验证 Node.js 是 否 安装 成 功 了 ， 打 开 一 个 Terminal 终 端 (*nix 系统 ) 或 者 
Prompt (Windows 系统 ) 然后 运行 如 下 命令 : 


node -V 
安装 成 功 的 话 你 就 可 以 看 到 Node.js 的 版 本 了 。 接 下 来 执行 这 个 命令 : 


npm -v 


你 应 该 会 看 到 npm 的 版 本 : 





npm 是 Node Package Manager (Node 包 管理 器 ) ， 我 们 将 使 用 他 来 为 我 们 的 lonic 项 目下 载 
不 同 的 依赖 包 。 


你 只 是 在 开发 期 间 需 要 Node js 。 上 面 图 片 显 示 的 版 本 号 只 是 为 了 展示 正确 的 输出 。 你 自 
己 的 版 本 有 可 能 跟 这 里 的 版 本 一 样 ， 或 者 更 新 一 些 。 本 章 其 他 版 本 号 的 显示 也 是 同 理 。 
met ps 
z x% Git 


Git 是 一 个 开源 的 免费 版 本 控制 系统 。 在 我 们 的 案例 中 ， 我 们 会 使 用 一 个 名 为 Bower 的 包 管 理 
器 ， 这 个 管理 器 就 是 用 Git 下 载 需要 的 库 的 。 同 时 lonic CLI 也 是 使 用 Git 下 载 项 目 模板 的 。 


导航 至 http/git-scm.com/downloads ， 下 载 对 应 平台 的 安装 包 ， 然 后 就 可 以 安装 了 。 一 旦 你 
完成 了 安装 ， 你 就 可 以 去 你 的 终端 /命令 行 运行 如 下 命令 : 


git --version 


你 将 会 看 到 如 下 输出 : 


+ ~ git --version 
git version 2.3.2 (Apple Git-55) 


4X Bower 


我 们 将 会 使 用 Bower 来 管理 我 们 应 用 的 依赖 库 。Bower 是 一 个 与 npm 一 样 的 包 管 理 器 ， 只 是 过 
他 linerflat (线性 /平面 ) 。 这 种 包 管 理 器 更 适合 去 下 载 网 页 开发 所 需 的 素材 。 
Bower 是 建立 在 Node.js 之 上 的 。 为 了 全 局 安装 Bower， 在 终端 /命令 行 里 输入 : 


npm install -g bower 


如 果 你 需要 sudo 来 运行 上 面 的 命令 ， 请 重新 检查 你 的 npm 安 装 。 想 要 忽略 sudo 进 行 npm 


全 局 安装 ， 请 参考 : http://competa.com/blog/2014/12/how-to-run-npm-without-sudo/ 


一 旦 Bower 安 装 成 功 ， 你 可 以 同样 通过 以 下 口令 去 验证 : 


bower -v 


+ ~ bower -v 
1T Pl 


4C Gulp 


接 下 来 ， 我 们 将 要 安装 Gulp， 这 是 一 个 基于 Node.js 的 构建 系统 。 他 会 将 很 多 单调 无 聊 的 任务 
自动 化 处 理 。 

例如 ， 当 你 的 网 络 项 目 准备 好 的 时 候 ， 你 可 能 想 要 压缩 CSS，JS 和 HTML 文 件 ， 为 Web 进 行 
图 片 优化 ， 将 代码 推送 到 你 的 生产 环境 ; 在 此 情景 下 ，Gulp 就 是 你 需要 的 工具 。 

Gulp 有 很 多 插件 用 来 自动 处 理 你 大 部 分 的 单调 的 任务 ， 他 主要 得 益 与 开源 社区 的 驱动 。 在 
lonic 中 ， 我 们 主要 用 Gulp 来 将 SCSS 代 码 转换 成 CSS。 我 们 利用 SCSS 代 码 定制 lonic 视 觉 元 
素 。 在 第 四 章 /onic 与 SCSS 中 ， 我 们 会 了 解 更 多 此 方面 的 事宜 。 

为 能 全 局 安装 gulp， 运 行 如 下 命令 : 


npm install gulp -g 


对 于 *nix 系 统 ， 运 行 这 个 命令 : 


sudo npm install gulp -g 


一 旦 Gulp 成 功 安装 ， 我 们 同样 可 以 使 用 以 下 命令 去 验证 : 


gulp -v 


17:58] CLI version 3.8.11 





4C XX Sublime Text 


个 可 选 的 安装 。 因 为 每 个 人 都 有 他 自己 喜欢 的 文本 编辑 器 。 在 用 了 一 些 其 他 的 文本 


这 完全 是 个 
年 器 之 后 ， 我 深 深 的 爱 上 了 Sublime Text ， 纯 粹 是 因为 他 的 简单 ， 还 有 很 多 的 Plug 和 Play 


如 果 你 想 试 试 这 个 编辑 器 ， 请 导航 至 http://www.sublimetext.com/3 下 载 Sublime Text 3 


A+ 。 
安装 Cordova 和 lonic CLI 
后 ， 为 了 完成 lonic 安 装 ， 我 们 需要 安装 lonic CLI » lonic CLI 是 一 个 包装 了 Cordova CLI 以 及 
一 些 额外 功能 的 包装 


本 书 中 所 有 范例 代码 使 用 的 是 Cordova 5.0.0，lonic CLI 版 本 1.5.0，lonic 版 本 
1.0.0 (uranium-unicorn ) 


一 下 命令 就 可 以 安装 lonic CLIT : 


£i 


npm install cordova@5.0.0 ionic@1.5.0 -g 


验证 安装 是 否 成 功 可 以 运行 如 下 命令 : 


cordova -v 


同时 也 可 以 用 这 个 命令 : 


2.4 安装 开发 和 运行 lonic 应 用 需要 的 工具 


ionic -v 


+ ~ cordova -v 
5.0.0 


3 ~ ionic -v 
1.5.0 





如 果 好 奇 lonic CLI 里 面 有 些 什么 ， 试 试 这 个 命令 : 


ionic 


你 将 会 看 到 这 么 一 对 任务 : 


CLI v1.5.0 
Usage: ionic task args 


ZZZZZZZZZZZZZZZZZZZZZZZ 
Available tasks: (use --help or -h for more info) 


Starts a new Ionic project in the specified PATH 

Start a local development server for app dev/testing 

Add platform target for building an Ionic app 

Run an Ionic project on a connected device 

Emulate an Ionic project on a simulator or emulator 

Locally build an Ionic project for a given platform 

Add a Cordova plugin 

Automatically create icon and splash screen resources (beta) 

Put your images in the ./resources directory, named splash or icon. 
Accepted file types are .png, .ai, and .psd. 

Icons should be 192x192 px without rounded corners. 

Splashscreens should be 2208x2208 px, with the image centered in the middle. 





上 面 的 截屏 由 于 尺寸 问题 显示 不 完全 ，ionic 还 有 其 他 一 些 任务 


你 可 以 阅读 以 下 每 个 任务 的 解释 以 了 解 他 们 分 别 是 做 什么 的 。 需 要 注意 的 是 ， 其 中 有 些 任务 
时 至 今日 仍 是 beta (试用 ) 状态 。 


做 完 以 上 这 些 事情 ， 我 们 已 经 安装 好 所 有 lonic 开 发 需要 的 软件 了 。 


平台 指引 


在 本 书 的 最 后 ， 我 们 将 会 创建 好 app 可 以 部 署 到 设备 上 去 。 由 于 Cordova 使 用 HTML,CSS, 以 
及 JS 代码 作为 输入 和 生成 平台 指定 安装 包 ， 你 需要 在 你 的 机 器 上 准备 好 构建 环境 。 
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2.4 安装 开发 和 运行 lonic 应 用 需要 的 工具 


Android 用 户 可 以 按照 Android Platform Guide : 
http://cordova.apache.org/docs/en/edge/guide platforms android index.md.htmlZAndr 
oid9620Platform9620Guide 的 指引 在 你 的 本 机 上 设置 SDK。 

iOS 用 户 可 以 按照 iDS Platform 

Guide : http://cordova.apache.org/docs/en/edge/guide_platforms_ios_index.md.html#i 
OS%20Platform%20Guide 的 指引 在 你 的 本 机 上 设置 SDK。 开发 iDS 应 用 必需 要 OSX 环 


境 。 
直至 今日 ，lonic 只 至 此 Android 4.0+ (虽然 他 在 2.3 上 也 可 以 运行 ) 和 iOS 6+ 版 本 的 移动 平 
台 。 但 是 Cordova 支 持 的 更 多 一 点 。 


Cordova 支 持 的 平台 参考 这 
里 : http://cordova.apache.org/docs/en/edge/guide_platforms_index.md.html#Platform 
%20Guides 
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用 到 的 名 词 : 


e Single Page Application (SPA) 单 页面 应 用 
e dependency/dependencies 依赖 库 

e bundle & 

e template 模板 

e scaffold 搭建 (如 果 更 好 的 建议 ， 请 联系 我 ) 


Hello lonic 


现在 咱们 完成 了 软件 安装 的 部 分 ， 我 们 将 搭建 一 些 lonic app ° 
lonic 有 三 个 可 用 模板 : 


e Blank: 空 的 lonic 项 目 ， 有 一 个 页 面 

e Tabs: 使 用 lonic tabs 构 建 的 一 个 范例 应 用 

e Side Menu: 这 个 是 一 个 侧 边 菜单 驱动 导航 的 范例 应 用 为 了 便于 理解 如 何 搭建 lonic 
app， 我 们 从 空白 模板 (Blank template) 开始 。 
为 了 保持 我 们 的 学 习 进 程 清晰 明了 ， 我 们 将 创建 一 个 文件 夹 作为 lonic 项 目 来 工作 。 创 建 
一 个 文件 夹 名 为 jonicApp ， 然后 在 里 面 创建 一 个 文件 夹 名 为 chapter2。 
接 下 来 ， 打 开 一 个 新 的 命令 行 /终端 进入 到 jonicApp 目 录 下 的 chapter2。 然 后 执行 如 下 


命令 : 


ionic start -a "Example 1" -i app.example.one examplei blank 


以 上 命令 中 : 
e -a "Example 1" : 这 是 供 凡人 识别 的 app 名 字 
e -iapp.example.on : 这 是 app 的 ID/ 域 名 倒转 
e example1 : 这 个 是 文件 夹 的 名 字 
e blank : 模板 名 
更 多 Ionic start 任 务 信息 ， 请 参考 附录 ， 更 多 主题 与 贴 士 


在 执行 任务 的 时 候 ，lonic CLI 非 常 详细 。 这 点 你 可 以 通过 命令 行 /终端 看 得 到 ， 因 为 开始 创建 
项 目的 时 候 里 面 会 打印 出 大 量 的 信息 。 

开始 之 后 ， 会 下 载 一 个 新 的 空白 项 目 然后 保存 到 example 文件 夹 。 接 下 来 ， 会 从 ionic-app- 
base 的 GitHub 目 录 下 载 ijonic-app-base， 在 这 之 后 ， 会 从 ionic-starter-template 的 GitHub 目 录 
下 载 ionic-starter-template。 


之 后 ， 会 将 config 文 件 里 面 的 app 名 字 和 ID 更 新 。 接 下 来 ， 会 运行 一 段 脚 本 然后 下 载 5 个 
Cordova 插 件 : 


日 


e org.apache.cordova.device (https://gitHub.com/apache/cordovaplugin-device): 这 个 是 用 
来 获取 设备 信息 ， 我 们 在 之 前 的 章节 已 经 看 到 过 


e org.apache.cordova.console (https://gitHub.com/apache/cordovaplugin-console): 这 个 插 
件 的 用 处 是 确保 console./og () 有 用 

e cordova-plugin-whitelist (https://github.com/apache/cordovaplugin-whitelist): 这 个 插件 实 
现 了 白 名 单 政策 ， 用 来 在 Cordova 4.0 的 应 用 的 web view 中 进行 导航 。 

e cordova-plugin-splashscreen (https://github.com/apache/cordovaplugin-splashscreen): 
这 个 插件 在 应 用 启动 期 间 实 现 闪 屏 的 展示 与 隐藏 。 

e com.ionic.keyboard (https://gitHub.com/driftyco/ionic-pluginskeyboard): 这 个 插件 提供 更 
容 允 的 键盘 交互 功能 ， 在 键盘 隐藏 /显示 的 时 候 发 出 事件 。 


所 有 这 些 信 息 稍 后 都 会 添加 到 package.jsom 文 件 里 面 ， 然 后 一 个 暂时 的 jiomic.project 诞 生 了 。 
一 旦 项 目 创建 成 功 ， 你 将 会 看 到 一 系列 的 指引 告诉 你 后 续 如 何 操作 。 输出 信息 大 概 是 这 么 个 


Your Ionic project is ready to go! Some quick tips: 
x cd into your project: $ cd examplel 

Setup this project to use Sass: ionic setup sass 
Develop in the browser with live reload: ionic serve 
Add a platform (ios or Android): ionic platform add ios [android] 
Note: i0S development requires OS X currently 
See the Android Platform Guide for full Android installation instructions: 
https://cordova.apache.org/docs/en/edge/guide platforms android index.md.html 
Build your app: ionic build «PLATFORM» 
Simulate your app: ionic emulate «PLATFORM» 
Run your app on a device: ionic run «PLATFORM» 


Package an app using Ionic package service: ionic package «MODE» «PLATFORM» 


For more help use ionic --help or ionic docs 


Visit the Ionic docs: http://ionicframework.com/docs 

New! Add push notifications to your Ionic app with Ionic Push (alpha)! 
https://apps.ionic.io/signup 

New Ionic Updates for June 2015 


The View App just landed. Preview your apps on any device 
http://view.ionic.io 


Invite anyone to preview and test your app 
ionic share EMAIL 


Generate splash screens and icons with ionic resource 
http://ionicframework.com/blog/automating-icons-and-splash-screens/ 


中 中 中 中 中 中 中 中 中 二 二 





为 了 继续 深入 项 目 ， 我 们 将 使 用 cd 命令 进入 到 example1 文 件 夹 。 我 们 不 按照 终端 T8348 
IS , Bob 了解 项 目 的 设置 。 。 一旦 我 们 熟悉 了 lonic 的 多 样 化 组 件 ， i 可 以 MNA 
m 令 行 的 指引 了 。 
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2.5 使 用 lonic 模 块 进行 工作 


进入 到 example1 目 录 之 后 ， 我 们 可 以 通过 以 下 命令 为 app 服 务 了 : 


ionic serve 


这 个 命令 将 在 端口 8100 上 启动 一 个 dev 服 务 器 ， 然 后 在 你 的 默认 ( 谁 敢 说 缺 省 砍 死 谁 ) 浏览 器 
中 启动 app。 由 于 你 需要 使 用 lonic， 我 个 人 (是 作者 不 是 译 者 ) 强烈 推荐 使 用 Google 


M xe 


Chrome! W & 3 zr Mozilla Firefox ° 
当 浏 览 器 启动 后 ， 你 可 以 看 到 空白 模板 。 
如 果 此 时 你 运行 这 个 


ionic serve 


你 将 会 看 到 显示 了 以 下 错误 信息 : 


+ examplel ionic serve 
The port 35729 was taken on the host localhost - using port 35730 instead 
Running live reload server: http://localhost: 35730 
Watching : [ 'www/*x*/*', '!www/lib/»*x/*' ] 
Running dev server: http://localhost:8100 
Ionic server commands, enter: 
restart or r to restart the client app from the root 
goto or g and a url to have the app navigate to the given url 
consolelogs or c to enable/disable console log output 
serverlogs or s to enable/disable server log output 
quit or q to shutdown the server and exit 


ionic $ An uncaught exception occured and has been reported to Ionic 


listen EADDRINUSE (CLI v1.5.0) 
Your system information: 


Cordova CLI: 5.0.0 

Gulp version: CLI version 3.8.11 
Gulp local: 

Ionic Version: 1.0.0 

Ionic CLI Version: 1.5.0 

Ionic App Lib Version: 0.1.0 
ios-deploy version: 1.7.0 

ios-sim version: 3.1.1 

OS: Mac OS X Yosemite 

Node Version: v@.12.2 

Xcode version: Xcode 6.3.2 Build version 6D2105 





这 个 错误 信息 的 意思 是 你 本 机 的 其 他 应 用 正在 使 用 端口 8100. 想 要 解决 这 个 问题 ， 你 可 以 在 运 
行 lonic serve 命 令 的 时 候 指定 其 他 端口 ， 例 如 8200 : 


ionic serve -p 8200 
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2.5 使 用 lonic 模 块 进行 工作 


应 用 成 功 启 动 后 ， 我 们 看 到 了 浏览 器 中 的 输出 ， 我 们 在 终端 /命令 行 可 以 看 到 如 下 信息 : 


+ examplel ionic serve 
Running live reload server: http://localhost:35729 
Watching : [ 'www/»*k/*x', '!www/lib/*»x/x' ] 
Running dev server: http://localhost:8100 
Ionic server commands, enter: 
restart or r to restart the client app from the root 


goto or g and a url to have the app navigate to the given url 
consolelogs or c to enable/disable console log output 
serverlogs or s to enable/disable server log output 

quit or q to shutdown the server and exit 


ionic $ B 





如 前 所 述 ，lonic CLI 的 任务 非常 详细 。 他 不 会 让 你 闲 着 。 在 lonic serve 命 令 运 行 的 时 候 你 就 可 
以 看 到 了 ， 你 可 以 输入 民 然 后 回 车 ， 此 时 应 用 会 重启 。 同样 ， 你 可 以 按 C 来 启用 或 者 急用 浏览 
JavaScript 打 印 日 志 到 终端 /命令 行 。 

运行 完 应 用 之 后 ， 按 Q 然 后 回 车 可 以 停止 服务 器 。 在 键 胡 上 按 下 Ctrl+ C 也 是 一 样 的 。 


SA k 4 bj ` 
浏览 器 开发 者 工具 设置 
在 我 们 深入 之 前 ， 我 建议 使 用 以 下 的 方式 去 设置 好 你 的 浏览 器 的 开发 者 工具 。 


Google Chrome 


lonic 应 用 局 动 后 ， 通 过 Cma+ Opt +! (Mac) 和 Ctrl + Shift + 1 (Windows/Linux) 打开 开发 
者 工具 。 然后 点 击 顶 行 最 后 一 个 图 标 ， 也 就 是 关闭 按钮 旁边 那个 ， 如 下 : 


Q 日 Elements Network Sources Timeline Profiles Resources Audits | Console! 
«top frame» v Preserve | 
Sv = Dock to the side 
> of the browser 
window 





E 


2.5 使 用 lonic 模 块 进 


这 个 操作 将 会 把 开发 者 工具 码 到 当前 也 的 右边 。 拖 动 浏览 器 与 开发 者 工具 之 间 的 分 界 条 知道 
视图 看 起 来 像 一 个 移动 设备 。 如 下 : 


ZU 译 者 注 ， 这 个 手机 按钮 可 以 直接 调整 移动 设备 模式 。 


Mari pody grace à MIO Mm Qeowser Dato rm macte Oat Mm -re 


jeyes Evers Listeners DOM Sreakpoints Properties 





(图 中 红色 信息 为 译 者 标注 ) 
这 个 视图 设置 对 修复 bug 和 调试 非常 有 用 。 


Mozilla Firefox 


如 果 你 d Firefox (火狐 ) 粉 ， 上 面 的 效果 同样 也 可 以 实现 。 当 |onic 应 用 启动 完成 
之 后 ， 通 过 Cmd + Opt +1 (Mac) 和 Ctrl + Shift +1 (Windows/Linux) 打开 开发 者 工具 (不 
Pula ，Firefox 的 本 地 开发 工具 ) 9 然后 点 及 浏览 器 窗口 顶部 按钮 ， 如 下 : 


R O impector PEE © oo 区 SyeEdax © Pertormane P Network 
e Net * css es @Secuty- © Logging Clear 
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现在 ， 可 以 拖 动 分 界 条 来 达成 我 们 在 Chrome 上 达到 的 效果 了 。 
€ kanm 


lonic Blank Starter a rr e 


body rade à phetyorm Drpmeer piace > 


nev 
«IDXTYPE htel» 
e 


ae 





lonic 项 目 结 构 


到 目前 为 止 ， 我 们 搭建 了 一 个 空白 lonic 应 用 ， 并 且 在 浏览 器 中 启动 了 。 我 们 现在 就 过 一 遍 项 
目 结构 。 

快速 提醒 你 一 下 ， 我 们 知道 Jonic 是 躺 在 Cordova 应 用 里 面 的 。 所 以 在 我 们 过 一 遍 Ilonic 代 码 之 
前 ， 我 们 先 来 聊 聊 Cordova 包 装 。 

如 果 已 经 在 你 的 文本 编辑 器 里 面 打 开 了 chapter2 example1 文 件 夹 ， 你 将 在 项 目的 根 目 录 下 看 
到 如 下 结构 : 


| 一 bower .json 
I— config.xml 
I— gulpfile.js 
I— hooks 

I— ionic.project 
|— package. json 
I— plugins 

| 一 scss 


L— www 
以 下 简单 解释 一 下 每 个 项 目 : 


e bower.json : 这 个 文件 是 由 需要 通过 Bower 加 载 的 依赖 库 组 成 。 后 续 我 们 将 安装 其 他 的 
Bower 包 以 在 应 用 中 使 用 。 


e config.xml : 这 个 文件 是 由 Cordova 在 将 你 的 lonic 应 用 转换 成 指定 平台 安装 包 的 所 需 元 信 
息 所 组 成 。 如 果 你 打开 config.xml， 你 将 会 看 到 大 量 的 XML 标签 描述 你 的 项 目 。 我 们 将 会 
再 次 详细 阅读 此 文件 。 

© gulpfile.js : 这 个 文件 是 我 们 在 开发 lonic 应 用 期 间 需 要 用 到 的 构建 任务 所 组 成 。 

e ionic.project : 这 个 文件 是 由 lonic 应 用 的 相关 信息 组 成 。 

e hooks : 这 个 文件 夹 是 由 Cordova 任 务 执行 时 候 执 行 的 脚本 所 组 成 。Cordova 任 务 可 以 是 
以 下 这 些 : aftrer platform add (添加 了 新 的 平台 之 后 ) > after plugin add (添加 了 新 
的 插件 之 后 ) ，before_emulate (模拟 之 前 ) ，after_run (app 运 行 之 后 ) ， 等 等 。 每 一 
个 任务 都 放 在 一 个 单独 的 文件 夹 ， 文 件 夹 名 字 是 Cordova 任 务 的 名 字 。 当 你 打开 hooks 文 
件 夹 的 时 候 ， 你 将 会 看 到 一 个 after_prepare 和 一 个 README.md 文 件 。 在 after_prepare 
文件 夹 里 面 ， 你 会 找到 一 个 脚本 文件 名 为 010_add_platform_class.js。 这 个 脚本 文件 将 
会 在 Cordova 的 准备 任务 执行 完成 之 后 被 执行 。 这 个 脚本 做 的 事情 是 给 标签 添加 一 个 
class， 这 个 class 的 名 字 和 应 用 运行 的 平台 的 名 字 一 样 。 这 样 可 以 帮助 我 们 更 好 的 基于 平 
台 为 应 用 进行 风格 化 。 你 可 以 在 hooks 文 件 夹 下 的 README.md 文 件 里 找到 一 个 可 以 勾搭 
的 任务 列表 。 

e plugins : 这 个 文件 夹 是 由 所 有 添加 到 本 项 目的 插件 所 组 成 。 我 们 后 续 会 添加 一 些 其 他 的 

插件 ， 然 后 你 就 可 以 在 这 里 看 到 反应 。 

scss : 此 文件 夹 是 由 我 们 将 要 用 来 风格 化 lonic 组 件 样式 的 的 Scss 文 件 所 组 成 。 更 多 相关 

内 容 参 考 第 四 章 /onic 与 SCSS 

e. WWW: 这 个 文件 夹 是 有 lonic 代 码 所 组 成 。 你 在 此 文件 夹 里 面 写 下 的 任何 东西 都 将 呈现 在 
web view 中 。 这 也 是 我 们 花费 时 间 最 多 的 地 方 。 


config.xml 文 件 


config.xml 文 件 是 一 个 平台 无 关 的 配置 文件 。 如 前 所 述 ， 这 个 文件 是 由 Cordova 在 将 你 的 lonic 

应 用 转换 成 指定 平台 安装 包 的 所 需 元 信息 所 组 成 。 

config.xml 文 件 的 设置 是 基于 W3C 的 Packaged Web Apps(Widgets) 规 格 书 
(http://www.w3.org/TR/widgets/) 的 ， 扩 展 到 为 指定 Cordova 核 心 API 功 能 ， 插 件 ， 和 指定 
平台 设置 。 有 两 种 设置 你 可 以 添加 到 这 个 文件 。 一 个 全 局 的 (global) ， 适 用 于 所 有 设备 ; A 

一 个 就 是 指定 平台 的 。 

如 果 在 文本 编辑 器 中 打开 config.xml 的 话 ， 第 一 个 遇 到 的 标签 上 XML 的 根 标签 。 接 下 来 ， 你 可 
以 看 到 widget 标 签 : 


«widget id-"app.example.one" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmln 
s:cdv="http://cordova.apache.org/ns/1.0"> 


上 面 指定 的 jd 是 app 域 名 的 倒置 ， 这 个 是 我 们 在 搭建 项 目的 时 候 提供 的 。 其 他 规格 都 是 定义 在 
Widget 标 签 里 面 作为 他 的 子 标签 的 。 子 标签 包括 app 名 字 (在 设备 上 安装 完成 之 后 显示 在 app 
图 标 下 面 的 名 字 ) ，app 描 述 信息 ， 以 及 作者 详情 。 

同时 ， 他 也 有 在 转换 Www 文件 夹 里 面 的 代码 为 本 地 安装 器 的 时 候 所 需要 的 附加 配置 。 


content 标 签 定义 了 应 用 的 尼 动 页 面 。access 标 签 定义 了 app 中 允许 加 载 的 URL。 他 默认 是 加 
载 所 有 的 URL。 preferrence 标 签 里 面 是 一 系列 的 名 和 值 对 。 例 如 ，DijallowOverScrol/ 描 述 的 是 
当 用 户 滚动 超过 文档 顶部 或 者 底部 的 时 候 ， 是 否 需要 视觉 反馈 。 

更 多 关于 平台 特殊 配置 (platform-specific configuration) ， 请 参考 此 链接 : 


e Android : 


http://docs.phonegap.com/en/4.0.0/guide platforms android config.md.html£ZAndroid96 
20Configuration 
e iOS: 
http://docs.phonegap.com/en/4.0.0/guide_platforms_ios_config.md.html#iO0S%20Config 
uration 
平台 特殊 配置 和 全 局 配置 是 同样 重要 的 。 关 于 全 局 配置 ， 请 参 


考 : http://docs.phonegap.com/en/4.0.0/config_ref_index.md.html#The%20config.x 
ml%20File 


Www 文件 夹 


如 前 所 述 ， 这 个 文件 组 成 了 我 们 的 lonic 应 用 ，HTML ，CSS 以 及 JS 代码 。 当 你 打开 Www 文件 
夹 ， 你 会 看 到 如 下 结构 : 

| 一 css 

| L— style.css 

— img 

| L— ionic.png 

|— index.html 

上 ja 

| Cm app. js 

L— lib 


L— ionic 


> lib 
d templates 
© index.htm! 


没 错 ， 这 个 图 是 我 本 地 的 


让 我 们 详细 的 看 一 下 这 些 东 西 : 


e index.html 这 个 是 应 用 的 启动 文件 。config.xm/ 里 面 的 的 src 标签 就 指向 的 这 个 文件 。 由 于 

使 用 AngularJS 作 为 我 们 的 JavaScript 框 架 。 此 文件 用 作 我 们 的 单 页 面 应 用 的 基本 页 / 

页 是 再 理想 不 过 了 。 当 你 打开 index.htm/ 的 时 候 ， 你 将 会 发 现 一 个 ng-app 属 性 ， 这 个 属 
ROM MA 向 到 了 开始 模块 。 

e css : 这 个 文件 夹 是 有 咱们 app 使 用 的 特有 样式 组 成 。 

e img: 这 个 文件 夹 里 面 都 是 咱们 app 需 要 使 用 的 图 片 。 

e js: 这 个 文件 夹 里 面 都 是 咱们 app 需 要 使 用 到 的 JavaScript 人 代码。 我 们 也 是 在 这 
AngularJS 代 码 的 。 打 开 app.js 文 件 ， 就 会 发 现 里 面 设置 好 了 AngularJS 模 块 ， ne 
lonic 作 为 依赖 。 

e lib: 这 里 是 我 们 通过 bower 安 装 的 包 的 存放 处 。 当 我 们 创 pp 这 个 文件 夹 是 随 
之 建立 的 ， 里 面 也 加 载 了 lonic 文 件 。 如 果 你 想 要 重新 下 载 一 遍 素 材 与 其 依赖 ， 可 以 通过 
在 终端 /控制 台 cd 进 入 到 example1 文 件 夹 ， 然 后 运行 以 下 命令 


bower install 


然后 你 就 可 以 看 到 下 载 了 额外 的 4 个 文件 夹 。 这 些 依赖 都 是 在 ionic-bower 包 里 面 列 出 的 在 
项 目的 根 目 TERIBONSI ISON FE do fee 的 。 

理想 状态 下 ， 我 们 不 一 is QN E 文 些 依赖 库 。 相 反 ， 我 们 更 倾向 于 使 
用 建立 在 这 些 依赖 库 之 上 的 Ionic & 


这 样 咱们 就 看 完了 这 个 空白 模板 。 在 开始 搭建 另 一 个 模板 之 前 ， 我 们 快速 的 敬一 
ERwww/js/app.js ° 
如 你 所 见 ， 我 们 创建 了 一 个 名 为 iestarter 的 AngularJS 模 块 ， 然 后 将 jonic 注 入 其 中 。 
$ionicPlatform 服 务 注入 到 run 方 法 中 作为 依赖 。 这 个 服务 用 来 检测 当前 工作 平台 ， 同 时 也 会 处 
理 设 备 (Android) 上 的 物理 按钮 。 当 前 内 容 中 ， 我 们 使 用 的 是 $ionicPlatform.ready 方 法 ， 这 
个 方法 用 来 在 设备 准备 完成 之 后 进行 相关 操作 。 
最 好 的 做 法 或 者 说 在 某 些 案例 中 必需 要 这 么 做 : 将 你 所 有 的 代码 包含 到 $jonicPlatform.ready 
中 去 。 这 样 一 来 ， 你 的 代码 将 只 会 在 整个 app 初 始 化 之 后 执行 。 

目前 为 止 ， 你 可 能 在 使 用 AngularJS 进 行 开 发 的 时 候 用 到 的 是 他 的 Web 方 面 。 但 是 当 使 用 lonic 
的 时 候 ， 我 们 还 sided Fieri BAA KAY 4X9 o lonic 给 我 们 提供 了 组 织 
好 的 了 服务 来 达成 这 些 功能 。 我 们 可 以 回首 第 一 章 lonic - 搭载 AngularJS 的 自 定义 服务 ， 并 
且 ， 我 们 后 续 将 会 在 第 五 章 lonic 指令 与 服务 中 更 加 深入 lonic 服 务 


45-3 tabs 12 1k 


为 了 对 lonic CLI 和 项 目 结构 有 个 更 好 的 感 党 ， 我 们 也 会 搭建 另外 两 个 开始 模板 。 先 来 tabs 模 
板 。 
使 用 cd 密码 返回 chapter2 文 件 夹 ， 然 后 运行 以 下 爱 命 令 : 


ionic start -a "Example 2" -i app.example.two example2 tabs 


你 可 以 看 到 ，example2 文 件 夹 里 面 就 建 好 了 一 个 新 的 tabs 模 板 了 。 使 用 cq 命令 进入 example2 
然后 执行 以 下 命令 


ionic serve 


你 将 会 看 到 如 下 截屏 的 标签 界面 应 用 : 


e Cc localhost:8100/#/tab/chats 
Chats Q D | Elements) Network Sources Timeline Profiles Resources Audits Console 


vente 


«head» </ Pe 
e Ben Sparrow ven Rip" "starter" Classe"grade-a platform-browser platform-eacintel platform-ready^» 
You yc way? 


Aa Max Lynx 


The nav bar thet will be updated a$ we navigate between views. 
> «ign-nav-bar class»"bar-stabie nav-bar-contajner" nav-bar-transitione"ios" nav-bar-directLon»"none 
av-bar» 

The views will be render av-view» di 


Templates are in the t$ ates. older s you coul is also 
have tepida inline in le you ^d Like) 


></script> 
c=" /1oc21^051:35729/11vere1oo0..15? sn1overe1" »«/sc e ipt» 


o Adam Bradleyson <lon-nav-view Classs"view-container" nav-view-transition="108" nav-view-direction-"none" nav-swipe».«/10n-hav-view» 


Perry Governor 
k at my chu htmt body grade-a platform-browser_platform-macintel_platform-ready 


Styles Event Listeners. DOM Breakpoints Properties 


o Mike Harrington P 
Tt 3 wicked good ice crea docy 


d) ~wetett-tover-cotioutr-neser 
~webkit-font-smoothing: antialiased; 
anoothing+—entiotioseds 


font + 
(s cba d tont-stre-odpust te] 
E monet 
ches! toe we rhon egere, 9, Oi Mtr 
-webkit-tap-highlight-color: transparent; 
wel 4 lect: mone; 


Show inherited properties 
webkit font smoothing 
antialia 

~wedkit~ i hignli ape 
color: rgpat®, 0, 6, 0); 





标签 排 在 页 面 底部 。 我 们 将 在 第 三 章 lonic CSS 组 件 与 导航 以 及 第 五 章 lonic 指令 与 服务 中 
深入 订 制 方法 的 知识 。 

当 你 返回 example2 文 件 夹 里 面 分 析 项 目 结 构 的 时 候 ， 所 有 的 内 容 基 本 与 空白 模板 一 样 ， 除 了 
WwW 文 件 夹 里 面 的 内 容 。 

这 一 次 ， 你 会 发 现 一 个 新 的 文件 夹 叫 做 templates。 这 个 文件 夹 将 由 每 个 AngularJS 路 由 页 面 
部 分 所 组 成 。js 文 件 夹 里 面 也 会 有 两 个 新 的 文件 : 


e controller.js : 这 里 是 由 AngularJS 的 控制 器 代码 所 组 成 
e services.js : 这 里 是 由 AngularJS 的 服务 代码 所 组 成 


现在 ， 你 大 概 对 lonic 是 如 何 与 AngularJS 整 合 以 及 所 有 的 组 件 是 如 何 手 牵手 的 去 进行 协作 有 
了 一 个 比较 好 的 理解 。 当 我 们 再 深入 了 解 lonic 之 后 ， 我 们 将 会 对 这 个 结构 有 更 多 的 感觉 。 


搭建 侧面 菜单 模板 


现在 我 们 将 进 后 一 个 模板 的 搭建 。 使 用 cq 命令 回 到 chapter2， 然 后 运行 以 下 命令 : 


2.5 使 用 lonic 模 块 进行 工作 


ionic start -a "Example 3" -i app.example.three example3 sidemenu 


然后 使 用 cd 命令 进入 example3 文 件 夹 ， 运 行 如 下 命令 : 


ionic serve 


然后 将 会 输出 类 似 如 下 截屏 的 效果 : 


> CD locahost:8100/1/app/playiists 


一 Q D iBementsi Network Sources Timeline Profiles Resources Audits Console 


v «htal» 
b «head». «/head» 


Reggae v <boty 


» cr 
Chill «script sree" //19521^011:253772/ 1i verelond, 112104 eve 09" »«/ script» 
b <div Clast^"rnodal-backdroo hide» </div> 
</body> 
«htel» 


m -一 一 p cee 一 一 一 一 一 一 一 


NT 
Cowbell Styles Event Usteners DOM Sreakpoints Properties 

element. style { +3 © 

> 

-view-container ( 


Agnis 3132763 
position! absolute; 


À0^16,C11:2222 


bos-sizing: border-box; 
) 


a 
boty, sonic-body ( Show inherited properties 


b -webkit-font-smoogthing: antialiated; 
~etait-tont-snootning: sotialiased; 


> -webhit-user-select: none; 
b box-sizing: border-bos; 
b color: Wrogie, o, è); 





你 可 以 自己 分 析 项 目 结构 ， 然 后 对 比 一 下 较 之 其 他 两 个 模板 有 何不 同 


你 可 以 使 用 jonic start -| 或 者 ionic templates 查 看 可 用 的 模板 列表 。 然 后 使 用 jonic start 任 
务 试 着 去 搭建 这 些 模板 。 
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generator-ionic 


用 到 的 名 字 ， 有 更 好 的 想法 请 联系 我 : 


e host v. 主导 

e scaffold 搭建 ， 脚 手 架 

e generator 生成 器 

e build 构建 

e confguration-over-code 编码 之 上 配置 





e code-over-confguration 配置 之 上 编码 


我 觉得 虽然 lonic CLI 非 常 不 错 了 ， 但 是 他 没有 相对 应 的 工作 流 。 我 说 的 工作 流 指 的 是 开发 代 
码 和 生产 代码 之 间 的 分 界 。 在 通过 Ionic CLIBR MRAP > Www 文件 夹 主导 了 开发 代码 和 生 
产 代码 。 当 你 的 代码 越 来 越 多 的 时 候 ， 这 会 成 为 一 个 需要 面 对 的 问题 了 。 

这 就 是 generator-ionic 价 值 体现 的 地 方 了 。generator-ionic 是 一 个 用 来 搭建 Ionic 项 目的 
Yeoman 生 成 器 。 如 果 你 还 不 知道 Yeoman 是 什么 东西 的 话 ， 那 么 我 就 告诉 你 吧 。Yeoman 是 
一 个 使 用 Grunt，Bower 以 及 Yo 搭建 app 的 脚手架 工具 。 并 且 ， 他 们 很 快 就 会 支持 gulp 了 。 


为 什么 选择 Yeoman ? 和 其 他 语言 的 IDE 不 同 的 是 JavaScript 或 者 说 web 开 发 没有 统一 的 
开发 环境 ，|IDE 里 用 户 只 需 导 航 到 File | New | AngularJS 项 目 或 者 File | New | HTML5 
项 目 。 这 也 是 Yoeman 为 什么 适合 的 地 方 。 


lonic 有 自己 的 CLI 来 搭建 app。 但 是 对 于 其 他 没有 生成 器 的 框架 ，Yeoman 提 供 了 基本 的 生成 
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想 要 了 解 Yeoman 更 多 信息 ， 请 参考 : http://yeoman.io/， 想 要 研究 Yeoman 生 成 器 ， 请 参 


考 : http://yeoman.io/generators/ 


lonic 也 有 其 他 一 些 生成 器 ， 但 是 我 对 generator-ionic 的 工作 流 和 功能 情 有 独 钟 。 


安装 generator-ionic 


安装 generator 之 前 ， 我 们 需要 全 局 安装 yo，grunt， 以 及 grunt-cli°。 使 用 如 下 命令 安装 即 可 : 


npm install yo grunt grunt-cli -g 


Grunt 是 另 一 个 与 Gulp 类 似 的 构建 工具 。Grunt 和 Gulp 最 大 的 不 同 是 : Grunt 是 一 个 编码 之 上 配 
置 的 构建 工具 ， 而 Gulp 是 配置 之 上 编码 的 构建 工具 。 


更 多 关于 Grunt 的 信息 参考 : http://gruntis.com/ 关于 我 对 Gulp 与 Grunt 的 见解 ， 这 里 有 更 
详细 的 解读 : http://arvindr21.github.io/building-n-Scaffolding 


接 下 来 ， 我 们 将 要 全 局 安装 generator-ionic : 


npm install generator-ionic -g 


安装 的 时 候 带 有 -g 标 识 的 值 需要 安 扎 ungyici 就 够 了 。 不 用 每 次 使 用 的 时 候 都 去 安装 一 


现在 ， 我 们 可 以 使 用 generator-ionic 创 建 一 个 新 的 lonic 项 目 了 。 通 过 ca 命令 进入 
到 chapter2， 然 后 在 其 中 建立 一 个 新 的 文件 夹 名 为 example4。 然 后 运行 如 下 命令 : 


yo ionic example4 


与 lonic CLI 不 同 的 是 ， 你 需要 回 到 一 些 关 于 你 想 要 怎么 创建 你 的 应 用 的 问题 。 你 可 以 参考 以 
下 回答 : 
? Would you like to use Sass with Compass (requires Ruby)? 
N 
? Which Cordova plugins would you like to include? 
org.apache.cordova.device 
org.apache.cordova.console 
com.ionic.keyboard 
? Which starter template would you like to use? 
Tabs 


Yeoman 将 会 下 载 项 目 运行 所 需 的 所 有 的 东西 。 一 旦 Yeoman 搭 建 完 成 之 后 ， 你 可 以 进入 
到 example4 文 件 夹 。 你 会 看 到 里 面 会 有 大 量 的 文件 以 及 文件 夹 。 


关于 完整 项 目 结 构 ， 可 以 参考 : https://gitHub.com/diegonetto/generatorionic#project- 
structure 


lonic-CLI 搭 建 的 app 和 generator-ionic 搭 建 的 app 有 一 些 很 关键 的 不 同 点 : 


e app : 与 lonic CLI 搭 建 的 app 不 同 的 是 ， 我 们 的 开发 将 在 app 文 件 夹 中 进行 ， 而 不 是 WWW 
文件 夹 内 。 这 就 是 我 之 前 提 到 的 代码 分 界 。 我 们 在 app 文 件 夹 中 进行 开发 ， 然 后 运行 构 
建 脚本 以 清理 文件 和 将 他 们 放 到 www 文 件 夹 内 共生 产 之 用 。 

e hooks : hooks 文 件 夹 里 面 会 多 出 了 4 个 脚本 。 

e Gruntfile.js : 与 lonic CLI 不 同 的 是 generator-ionic 使 用 Grunt 管 理 任务 。 如 果 你 觉得 这 里 需 
要 学 习 的 东西 太 多 的 话 ， 我 建议 你 用 lonic CLISGULP > 而 不 是 generator 和 Grunt。 


如 果 你 使 用 generator-ionic 搭 建 app 的 话 ， 不 要 在 动 WWW 里 面 的 东西 。 当 你 运行 builq 
qoe ， 这 个 文件 夹 里 面 的 内 容 将 会 被 清空 ， 然 后 从 app 文 件 夹 中 重新 生成 。 
可 以 通过 这 个 地 址 查看 运行 app 时 可 以 用 到 的 工作 流 命令 : 
https://gitHub.com/diegonetto/generatorionic#workflow-commands 所 有 的 CLI 方 法 
都 被 grunt 命 令 包 装 起 来 了 。 因此 ， 例 如 当 你 想 要 执行 lonic 服 务 的 时 候 ， 在 使 用 


generator-ionic 的 情况 下 通过 运行 grunt serve 即 可 。 


所 以 ， 我 们 通过 以 下 命令 来 运行 搭建 的 app 吧 : 


grunt serve 


你 可 以 看 到 跟 用 lonic CLUS tab app 一 样 的 输出 。 
还 有 三 个 使 用 generator-ionic 而 不 是 lonic CLI 的 理由 是 他 支持 以 下 : 


e 代码 提醒 : https://github.com/diegonetto/generatorionic#grunt-jshint 

。 使 用 Karma (一 个 测试 框架 ) 进行 测试 ， 使 用 lstanbul 进 行 覆 
à : https://github.com/diegonetto/generator-ionic#grunt-karma 

。 Ripple 模 拟 器 : https://github.com/diegonetto/generatorionic#grunt-ripple 想 你 举证 使 用 
generator-ionic 的 主要 原因 是 当 你 的 app 变 大 的 时 候 ， 你 可 以 导入 这 个 工作 流 。 再 次 声 
明 ， 这 个 个 人 推荐 ， 可 能 你 喜欢 lonic CLI 也 说 不 定 。 
你 也 可 以 使 用 其 他 你 觉得 用 起 来 比较 舒服 的 lonic 生 成 器 。 


总 结 
本 章 中 ， 你 收获 了 一 些 移动 混合 应 用 架构 的 知识 。 同 时 你 也 学 会 了 混合 app 是 如 何 工作 的 。 我 


们 也 看 到 eco duo A > CSS, 以 及 JS 代码 缝合 到 一 起 然后 在 web view T? tt 
行 的 。 然 后， 我 们 在 本 地 安装 了 lonic 开 发 需要 的 软件 。 我 们 使 用 lonic CLI 搭 建 了 一 个 空白 模 
板 并 且 分 析 了 他 的 项 目 结构 。 紧 接着 ， 我 们 搭建 了 另外 两 个 模板 并 且 区 分 了 他 们 之 间 的 同 
步 。 我 们 还 安装 了 generator-ionic 并 且 用 他 搭建 了 一 个 范例 app， 分 析 了 他 与 lonic CLI 搭 建 的 
项 目 之 间 的 不 同 点 。 


更 多 信息 可 以 查看 : http://ionicframework.com/present-ionic/slides 


接 下 来 的 章节 我 们 将 理解 lonic CSS 组 件 以 及 路 由 。 这 些 知 识 会 帮助 我 们 使 用 |lonic API 搭 建 有 
趣 的 用 户 界 面 和 多 页 面 应 用 。 


lonic CSS 组 件 与 导航 


用 到 的 名 词 ， 如 果 有 更 合适 的 请 联系 我 : 
e grid system 格子 系统 


到 目前 为 止 ， 我 们 知道 了 什么 是 lonic， 在 移动 混合 应 用 开发 的 大 舞台 上 他 适合 做 什么 。 我 们 
也 了 解 了 两 种 搭建 lonic app 的 方法 : lonic CLI 与 generator-ionic。 AX > #4144 4 3 lonic 
CSS 组 件 ，lonic 格 子 系统 ， 以 及 lonic 状 态 路 由 。 我 们 将 要 使 用 丰富 多 彩 的 lonic 组 件 来 创建 优 
秀 用 户 体验 的 app。 


本 章 将 要 涵盖 的 范围 : 


e lonic 格 子 系统 

。 丰富 的 CSS 组 件 

e 整合 lonic CSS 组 件 与 AngularJS 

e |onic 状 态 路 由 器 
可 以 通过 Github 地 址 获得 本 章 源 代码 ， 发 起 issue， 以 及 与 作者 沟通 ， 地 址 
是 : https://github.com/learning-ionic/Chapter-3 


lonic CSS 组 件 


lonic 是 一 个 强力 的 移动 CSS 框 架 与 一 系列 牛 逼 的 AngularJS 指 令 与 服务 的 组 合 。 有 了 这 些 ， 任 
何 想法 投入 市 场 需要 的 时 间 极 大 的 缩小 了 。 lonic CSS 框 架 包含 了 创建 一 个 app 所 需要 的 绝 大 
部 分 组 件 。 

为 测试 驱动 CSS 组 件 的 可 用 性 ， 我 们 将 搭建 一 个 空白 的 启动 版 本 ， 然 后 添加 lonic 组 件 。 

开始 搭建 之 前 ， 新 建 一 个 文件 夹 名 为 chapter3， 本 章 的 所 有 范例 都 将 在 此 文件 夹 下 搭建 。 


本 章 中 ， 我 们 每 个 组 件 建立 一 个 app 以 便 更 好 的 理解 。 当 然 ， 如 果 你 想 要 只 用 一 个 app 也 
是 可 以 的 。 


新 建 一 个 空白 app 的 命令 如 下 : 


ionic start -a "Example 5" -i app.example.five example5 blank 


用 到 的 名 词 ， 如 有 更 好 的 建议 请 联系 我 


e layout 布局 

e FlexBox 弹性 金 

e grid 格子 ， 栅 格 

e class X 

e markup 标记 

e viewport 视窗 ， 窗 口 
e header 头 ， 页 头 

e footer 脚 ， 页 脚 


lonic 格子 系统 


你 需要 使 用 lonic 提 供 的 格子 系统 对 组 件 布局 进行 一 个 良好 的 管理 。 
lonic 格 子 系统 的 一 个 优秀 之 处 是 他 是 基于 FlexBox 的 。FlexBox， 或 者 说 CSS Flexible Box 
Layout Module (CSS IE EA ARR) 提供 了 一 个 盒子 模型 供用 户 界 面 设 计 。 


FlexBox 的 更 多 信息 参考 : http://www.w3.org/TR/css3-flexBox/， 以 及 一 个 很 不 错 的 
FlexBox 手 册 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 


基于 FlexBox 的 格子 系统 的 好 处 是 你 不 需要 任何 一 个 固定 行 的 格子 系统 。 你 可 以 随 你 乐意 在 一 
列 中 铺 任何 行 数 ， 格 子 系统 将 会 自动 帮 你 设置 到 相同 宽度 。 这 一 点 不 同 与 其 他 基于 CSS 的 格 
子 系统 ， 你 无 需 担心 添 加 到 格子 系统 中 的 行 的 class 数 量 。 

为 了 初步 了 解 格子 系统 ， 打 开 exmaple5/Www 文 件 夹 里 面 的 jndex.html， 在 ion-content 里 面 加 
上 以 下 代码 : 


<div class="row"> 
«div class="col">col-20%-auto</div> 
«div class="col">col-20%-auto</div> 
«div class="col">col-20%-auto</div> 
«div class="col">col-20%-auto</div> 
«div class="col">col-20%-auto</div> 
«/div» 


然后 在 标签 后 加 上 以 下 样式 ， 以 区 分 不 同 内 容 : 


«style» 
.col { 
border: 1px solid red; 


} 
</style> 


3.1 lonic 格子 系统 
以 上 样式 不 是 使 用 格子 系统 的 必须 样式 ; 他 在 这 里 只 是 用 来 明显 区 分 布局 里 面 列 之 间 的 
分 界线 。 


译 者 测试 : 使 用 yo 建立 的 项 目 ，style.css 的 路 径 和 app.js 的 文件 路 径 可 能 会 有 问题 ， 这 
个 地 方 自己 改 就 可 以 了 ， 有 可 能 是 generator-ionc 的 版 本 比较 上 昌 或 者 是 其 他 原因 造成 的 


保存 文件 ， 然 后 通过 cd 进入 到 example5 文 件 夹 然后 运行 以 下 命令 : 


ionic serve 


然后 你 将 看 到 如 下 效果 : 


Ac localhost:8100 


lonic Blank Starter 
col-2096- |col-2096- |col-2096- | col-20%- | col-2096- 
auto auto auto auto auto 


为 验证 宽度 是 否 是 自动 变化 的 ， 我 们 将 子 aqjv 缩 减 到 3 个 ， 如 下 : 





«div class="row"> 
«div class="col">col-33%-auto</div> 
«div class="col">col-33%-auto</div> 
«div class="col">col-33%-auto</div> 








«/div» 
>» C localhost:8 100 
lonic Blank Starter 
col-33%-auto col-33%-auto col-33%-auto 
之 后 你 可 以 看 到 : 


没有 任何 麻烦 ， 也 不 需要 任何 计算 ; 你 需要 做 的 仅仅 是 添加 你 要 使 用 的 列 进去 就 可 以 了 ， 他 
们 将 会 自动 帮 你 调整 到 相等 的 宽度 。 
但 是 这 也 意味 着 你 不 能 使 用 自 定义 的 宽度 。 想 到 使 用 自 定义 宽度 可 以 简单 的 通过 使 用 lonic 提 
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供 的 类 就 可 以 达成 。 


例如 ， 假 设 你 要 将 之 前 例子 中 的 第 一 列 跨度 改 为 50% 其 余 2 列 使 用 剩 下 的 宽度 ; 你 需要 做 到 的 


是 给 第 一 个 qjv 添 加 一 个 名 为 co/-50 的 类 ， 如 下 : 


«div class="row"> 
«div class="col col-50">col-50%-set</div> 
<div class="col">col-25%-auto</div> 
<div class="col">col-25%-auto</div> 
</div> 


然后 你 将 看 到 : 


localhost:8100 


lonic Blank Starter 


col-5096-set col-25%- col-25%- 
auto auto 





以 下 列表 是 关于 宽度 使 用 方面 的 一 些 预定 义 的 类 : 





对 于 所 有 的 col 类 ， 你 可 以 使 用 上 表 中 的 任意 类 来 制定 宽度 。 


你 也 可 以 对 列 进行 偏 移 。 例 如 ， 将 以 下 标记 加 入 到 我 们 的 范例 中 : 


<div class="row"> 
«div class="col col-offset-33">col-33%-offset</div> 
<div class="col">col-25%-auto</div> 

</div> 


. LL A 2 bÈ 
3.1 lonic T AZ 


然后 你 将 看 到 : 


= C' |  localhost:8100 


lonic Blank Starter 


col-5096-set col-2596- col-25%- 


auto auto 


col-33%-offset col-33%-auto 





第 一 个 qiv 偏 移 量 33%， 其 他 两 个 qiv 瓜 分 了 剩 下 的 ~66%。offset 类 做 的 是 在 div 左 边 进 行 一 个 指 


定 比 例 的 填充 。 
以 下 是 一 份 应 用 宽度 偏 移 的 预定 义 类 的 列表 : 





你 也 可 以 在 垂直 方向 上 排列 这 些 列 。 这 是 格子 系统 中 使 用 FlexBox 带 来 的 另 一 个 好 处 。 


在 早先 添加 了 offset 的 列 后 面 添加 以 下 标记 : 


«div class="row"> 
«div class="col col-top">.col-top</div> 
<div class="col col-center">.col-center</div> 
<div class="col col-bottom">.col-bottom</div> 
<div class="col">1 
<br>2 
<br>3 
<br>4 
</div> 
</div> 
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3.1 lonic 格子 系统 


结果 如 下 : 


> C localhost:8100 


lonic Blank Starter 


col-25%- col-25%- 





如 果 你 行 中 的 列 有 高 于 其 他 列 的 ， 你 可 以 给 那 一 列 添加 col-top 类 以 将 他 的 内 容 定位 的 本 行 的 
顶部 ， 如 上 。 或 者 你 可 以 添加 col-center 类 以 将 他 的 内 容 在 本 行 中 居中 ， 或 者 col-bottom 以 将 
他 的 内 容 相 对 本 行进 行 底部 对 齐 。 

有 了 这 个 简单 而 强大 的 格子 系统 ， 布 局 是 无 限 可 能 的 。 


在 第 六 章 创建 一 个 书店 APP 中 ， 我 们 将 会 研究 响应 式 格 子 (布局 ) 和 使 用 ng-repeat 构 建 
一 个 动态 格子 (AR) 。 更 多 关于 |lonic 格 子 系 统 的 信息 ， 请 参考 : 
http://ionicframework.com/docs/components/#grid 
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用 到 的 名 字 ， 如 有 更 好 的 建议 ， 请 联系 我 : 


e item %8 

e button 4% 42 

e class-named 类 名 为 
e list 列表 

e element 元 素 

e header 页 头 

e footer 页 脚 


结构 


接 下 来 ， 我 们 将 要 了 解 单 页 面 Ionic 应 用 需要 的 页 面 结构 。 接 下 来 的 内 容 我 们 可 以 新 建 一 个 空 


项 目 (空白 模板 的 项 目 ) 。 
行 以 下 命令 以 创建 一 个 空 app : 


ionic start -a "Example 6" -i app.example.six example6 blank 


使 用 cd 命令 ， 进 入 example6 文 件 夹 然后 运行 以 下 命令 : 


ionic serve 


你 将 会 在 默认 的 浏览 器 中 看 到 空白 app 启 动 了 。 
打开 example6/Www/index.html 文 件 。 在 body 标 签 中 ， 你 应 该 看 到 这 


<ion-pane> 
<ion-header-bar class="bar-stable"> 
«hi class="title">Ionic Blank Starter</hi> 
</ion-header -bar> 
<ion-content> 
</ion-content> 
</ion-pane> 


个 页 面 都 被 包装 在 一 个 jon-pane 指 令 中 。 
ongane— 1 单 的 适 配 窗口 的 容 

° http://ionicframework.com/docs/api/directive/ionPane/ 
接 下 来 ， 你 可 以 看 到 一 个 jon-header-bar 指 令 
(http://ionicframework.com/docs/api/directive/ionHeaderBar/) ° 


文 样 的 一 个 结构 : 


这 个 指令 给 页 面 添加 了 一 个 


定 的 页 头 。 要 注意 一 下 添加 给 jon-headerbar 指 令 的 类 属性 
除 此 以 外 ，lonic 有 9 个 心情 的 颜色 样本 。 如 下 : 


light 


stable 


positive 


balanced 


assertive 





你 可 以 看 到 我 们 当前 /on-headerbar 指 令 应 用 了 barstable 类 。 可 以 通过 将 stable 替 换 为 上 表 中 


的 任意 名 字 来 改变 页 头 
例如 ， el ee ， 页 头 的 背景 色 将 会 改变 ， 效 果 看 起 来 将 是 这 样 


Fa: 


CQ Q localhost:8100 


lonic Blank Starter 


简单 快捷 ， 对 吧 ? TEF” RANG BS IIENHSCSSÓR XX M A AHA © 
z @ E ijon-header-bar/& t %) 44 4 x: ion-content ° ion-content 
(http://ionicframework.com/docs/api/directive/ionContent) 指令 启用 了 构建 内 容 区 域 ， 
区 域 是 屏幕 的 不 动 户 ， 且 需要 滚动 。 同 时 你 也 可 以 通过 $ionicScrolliDelegate 更 好 的 对 他 

控制 。 这 部 分 的 详细 信息 ， 参 考 第 五 章 /onic 指 令 与 服务 。 

为 了 完善 页 面 结 构 ， 我 们 将 会 给 他 添加 一 个 页 脚 (footer) 。 在 /on-pane 的 末尾 ， 添 加 : 





这 篇 
进行 


^M 


«ion-footer-bar class="bar-assertive"> 
«div class="title">Footer</div> 


«/ion-footer-bar» 


然后 ， 保 存 文件 ; 在 浏览 器 中 ， 你 将 看 到 如 下 : 


人 localhost:8 100 


lonic Blank Starter 





你 可 以 像 上 面 这 样 使 用 lonic 搭 建 一 个 单 页 面 app， 这 样子 去 构建 你 的 app : 


<body ng-app="starter"> 
<ion-pane> 
<ion-header-bar class="bar-assertive"> 


</ion-header -bar> 
<ion-content> 


</ion-content> 
<ion-footer-bar class="bar-assertive"> 


</ion- footer -bar> 


</ion-pane> 
</body> 


以 上 结构 的 无 指令 版 本 : 


«div class="pane"> 
«div class="bar bar-header bar-assertive"> 


«/div» 
«div class="content has-header has-footer padding"> 


«/div» 
«div class="bar bar-footer bar-assertive"> 


«/div» 


«/div» 


当然 ， 你 也 可 以 很 方便 的 给 页 头 或 者 页 脚 添加 按钮 。 在 header 里 面 添加 按钮 的 结构 大 概 是 这 
样子 的 : 


«ion-header-bar class="bar-assertive"> 
«div class="buttons"> 
«button class="button">Left</button> 
«/div» 
«hi class="title">Ionic Blank Starter</h1> 
«div class="buttons"> 
«button class="button">Right</button> 
«/div» 
</ion-header -bar> 


ion-header-bar 中 ，h1 指 令 前 添加 的 按钮 将 会 显示 在 左边 ，h1 标 签 后 面 的 将 显示 在 页 头 的 右 
边 。 如 下 : 


© Q localhost:8100 


lonic Blank Starter 


Footer 





在 页 脚 中 使 用 同样 的 标注 也 可 以 同样 生成 这 些 按钮 。 

jon-heaaer-bar 指 令 是 生成 页 头 的 一 个 途径 。jon-heaaerbar 用 来 生成 静态 页 头 是 完美 之 选 
但 是 当 我 们 引入 lonic 状 态 路 由 的 时 候 ， 这 些 事情 很 快 就 变 得 棘手 起 来 。 当 你 在 处 理 一 个 多 页 
面 应 用 的 时 候 ， 你 想 让 lonic 基 于 导航 自动 显示 返回 按钮 ， 我 们 将 会 使 用 ion-nav-bar 替 代 iom- 
header-bar © 稍 后 我 们 在 学 习 lonic 状 态 路 由 的 时 候 会 讲 到 ijon-nav-bar。 


更 多 关于 页 头 组 件 的 信息 ， 请 参考 : 
http://ionicframework.com/docs/components/Zheader » 更 多 关于 content 组 件 信 息 ， 请 
参考 : http://ionicframework.com/docs/components/#content 更 多 关于 页 脚 组 件 的 信 
息 ， 请 参考 : http://ionicframework.com/docs/components/#footer 


按钮 


Ilonic 在 尺寸 和 样式 上 ， 为 按钮 提供 了 丰富 多 彩 的 变化 。 
在 www/index.html 的 ion-content 指 令 中 ， 更 新 如 下 代码 你 就 会 看 到 不 同 按钮 的 变化 : 





«ion-content class="padding"> 
«button class="button"> 
Default 
</button> 
<button class="button button-full button-positive"> 
Full width Block Button 
</button> 
<button class="button button-small button-assertive"> 
Small Button 
</button> 
<button class="button button-large button-calm"> 
Large Button 
</button> 
<button class="button button-outline button-dark"> 
Outlined Button 
</button> 
<button class="button button-clear button-energized"> 
Clear Button 
</button> 
<button class="button icon-left ion-star button-balanced"> 
Icon Button 
</button> 

</ion-content> 


注意 看 jion-content 指 令 的 类 属性 。 这 个 将 会 给 ion-content 指 令 的 元 素 间 加 上 一 个 10px 的 间 
隔 。 保 存 文 件 之 后 ， 可 以 看 到 如 下 效果 : 


c localhost:8100 


eft lonic Blank Starter Right 


Default 


Full Width Block Button 


Large Button Outlined Button 


Clear Button Mi dia 





Footer 





以 上 截屏 显示 了 所 有 基于 lonic 颜 色 样 本 的 按钮 。 


考 : http://ionicframework.com/docs/components/#buttons 


列表 


任何 app 最 具 代 表 性 的 组 件 英 过 于 显示 一 系列 条 目的 列表 了 。 列 表 和 其 他 lonic CSS 组 件 一 
样 ， 结 构 非 常 简单 ， 列 表 都 是 由 CSS 类 和 HTML 结 构 驱 动 的 。 在 lonic 中 ， 如 果 你 有 一 个 带 有 
名 为 list 的 类 名 父 元 素 和 任意 数量 的 带 有 类 名 item 的 子 元 素 ， 这 些 条 目 会 以 lonic 式 列表 的 方式 
自动 排列 。 例 如 : 


«ul class="list"> 
<li class="item"> 
Item 1 
</li> 
<li class="item"> 
Item 2 
</li> 
<li class="item"> 
Item 3 
</li> 

</ul> 


你 也 可 以 这 么 写 : 


«div class="list"> 
«div class="item"> 
Item 1 
«/div» 
«div class="item"> 
Item 2 
«/div» 
«div class="item"> 
Item 3 
«/div» 

«/div» 


两 者 都 会 导向 同样 的 布局 显示 ， 如 下 : 


c localhost:8 100 


lonic Blank Starter Right 





Footer 


-o 为 止 的 lonic 经 验 ， 当 列表 有 超过 250 个 通过 ng- s 象 数组 创建 的 条 目的 时 
， 并 且 每 个 对 象 有 超过 10 个 属性 ， 这 个 时 候 应 用 的 响应 就 会 变 慢 。 就 这 么 说 ， 你 可 以 根据 

dc saa dele 。 

lonic 组 件 的 多 功能 性 都 在 他 的 类 里 面 。 大 部 分 你 想 要 的 布局 这 些 类 都 提供 

例如 ， 如 果 你 想 给 个 在 每 个 列表 条 目的 左边 添加 图 标 ， 你 只 需要 给 条 目 加 一 个 名 为 jtem-icon- 

left 的 类 就 可 以 了 。 这 样 ， 条 目的 左边 就 会 为 添加 图 标 留 出 足够 的 空间 。 


可 以 参考 这 个 范例 : http://ionicframework.com/docs/components/#item-icons 


同样 的 ， 当 你 想 要 在 每 个 条 目的 左边 添加 一 个 缩 略 图 的 时 候 ， 你 只 需要 添加 一 个 名 为 jtem- 
thumbnail-left 的 类 就 可 以 了 。 


缩 略 图 的 范例 可 以 参考 : http://ionicframework.com/docs/components/#item-thumbnails 
关于 列表 更 多 信息 ， 请 参考 : http://ionicframework.com/docs/components/#list 


卡片 (Cards) 


卡片 上 移动 设备 上 最 好 的 内 容 陈 列 设计 模式 。 对 于 用 来 展示 用 户 个 人 内 容 的 页 面 或 者 app， 卡 
片上 最 佳之 选 。 整个 世界 在 移动 设备 上 展示 内 容 以 及 桌面 上 展示 某 些 案例 ， 都 在 走向 卡片 模 
式 。 典 型 的 代表 有 Twitter， 和 Google Now 。 


所 以 ， 你 也 可 以 简单 的 将 这 种 设计 模式 带 入 到 你 的 app 中 。 你 需要 做 的 只 是 将 你 的 个 人 内 容 设 
计 为 适合 卡片 展示 ， 然 后 添加 一 个 名 为 card 的 类 给 容器 。 如 果 你 想 展示 一 系列 卡片 作为 列 
表 ， 你 只 需要 将 card 类 添加 到 列表 容器 ot o 

以 下 是 一 个 简单 的 展示 天 气 信 息 的 卡片 秀 ， 


«ion-content class="padding"> 
«div class="list card"> 
<div class="item text-center"> 
<hi>Today's Weather</h1> 
</div> 
«div class="item item-body"> 
<p> 
<div class="text-center"> 
<i class="icon ion-ios-partlysunny" style="font-size:128px"></i> 
</div> 
<div class="text-center"> 
<h2>Partly Sunny</h2> 
</div> 
</p> 
</div> 
<div class="item tabs tabs-secondary tabs-icon-left"> 
<a class="tab-item" href="#"> 
<i class="icon ion-thumbsup"></i> Like 
</a> 
<a class="tab-item" href="#"> 
<i class="icon ion-chatbox"></i> Comment 
</a> 
<a class="tab-item" href="#"> 
<i class="icon ion-share"></i> Share 
</a> 
</div> 
</div> 
</ion-content> 


你 的 页 面 效 果 应 该 是 这 样 的 : 
Œ © localhost:8100 


lonic Blank Starter 


Today's Weather 


r^ 
A» 


Partly Sunny 


Footer 





这 个 设计 在 同时 显示 了 所 有 的 潜在 信息 的 时 候 又 不 失 优雅 。 下 次 你 想 要 向 用 户 展示 你 的 个 性 
的 时 候 ， 考 虑 一 下 使 用 卡片 。 


lonicons 图 标 
lonic 有 大 量 的 字体 图 标 ， 上 面 看 到 的 天 气 图 标 就 是 其 中 一 个 。 导 航 到 http://ionicons.com/， 
你 看 到 的 所 有 字体 图 标 都 可 以 立即 使 用 。 


为 了 方便 起 见 ， 提 供 一 个 搜索 条 了 来 搜索 指定 类 型 的 图 标 。 例 如 ， 当 你 在 搜索 条 里 输入 
sunny ， 你 就 可 以 看 到 上 面 截屏 里 面 显示 的 图 标 。 

重要 警告 ， 一 定 要 确保 你 的 lonicons 版 本 和 你 的 lonic CSS 文 件 里面 的 Inicons 版 本 一 致 。lonic 
队 持续 添加 新 的 图 标 和 更 新 版 本 号 。 此 处 使 用 的 sunny 图 标 是 在 lonicons 2.0.1 版 本 发 布 的 。 


更 多 关于 lonicons 的 信息 ， 请 参考 http://ionicframework.com/docs/components/#icons 


表单 元 条 


lonic 也 带 来 了 他 的 表单 元 素 和 布局 。 以 下 是 一 个 简单 的 登录 表单 结构 : 


«ion-content class="padding"> 
«div class="list"> 
«label class="item item-input"> 
«span class="input -label">Username</span> 
<input type="text"> 
</label> 
<label class="item item-input"> 
<span class="input -label">Password</span> 
<input type="password"> 
</label> 
</div> 
</ion-content> 


效果 图 : 


lonic Blank Starter 


Username arvindr21 


Password 


Footer 





你 也 可 以 通过 给 标签 添加 一 个 jtem-floating-label 类 来 创建 一 个 花 式 表单 : 


<ion-content class="padding"> 
«div class="list"> 
«label class="item item-input item-floating-label"> 
<span class="input-label">Username</span> 
<input type="text" placeholder="Username"> 
</label> 
<label class="item item-input item-floating-label"> 
<span class="input -label">Password</span> 
<input type="password" placeholder="Password"> 
</label> 
</div> 
</ion-content> 


效果 图 如 下 : 


Ionic Blank Starter ligh 


Username 


arvindr21 





你 也 可 以 给 这 些 表单 元 素 添加 图 标 。 只 需要 在 标签 (label) 里 面 添加 一 个 带 placeholder-icon 
的 /标签 (tag) 就 可 以 了 : 


<ion-content class="padding"> 
<div class="list list-inset"> 
<label class="item item-input"> 
<i class="icon ion-search placeholder -icon"></i> 
<input type="text" placeholder="Search..."> 
</label> 
</div> 
</ion-content> 


效果 图 如 下 : 
localhost:8100 


lonic Blank Starter Right 


Footer 





你 也 可 以 添加 其 他 的 表单 元 素 ， 例 如 文本 域 (lext ares) 和 选择 列表 (select) ; 他 们 会 如 期 出 现 并 
且 会 非常 整齐 的 融入 到 其 他 表单 组 件 中 : 


«ion-content class="padding"> 
«div class="list"> 
«label class="item item-input"> 
«textarea placeholder="This is a &lt;textarea&gt; 
&1t;/textarea&gt;"></textarea> 
</label> 
<label class="item item-input item-select"> 
<div class="input-label"> 
Gender 
</div> 
<select> 
<option>Male</option> 
<option>Female</option> 
</select> 
</label> 
</div> 
</ion-content> 


效果 图 如 下 : 


C localhost:8100 


Ionic Blank Starter 


Gender 


Footer 





有 两 种 方法 展示 复 选 框 。 你 可 以 将 他 展示 为 复 选 框 ， 也 可 以 作为 切换 开关 。 
以 下 标记 代码 展示 了 一 个 可 选 的 水 果 列 表 : 


«ion-content class="padding"> 
«ul class="list"> 
«li class="item item-checkbox"> 
<label class="checkbox checkbox-assertive"> 
<input type="checkbox"> 
</label> Apples 
</li> 
<li class="item item-checkbox"> 
<label class="checkbox"> 
<input type="checkbox"> 
</label> Oranges 
</li> 
<li class="item item-checkbox checkbox-energized"> 
<label class="checkbox"> 
<input type="checkbox"> 
</label> Lemons 
</li> 
</ul> 
</ion-content> 


e localhost:8100 


Ionic Blank Starter 


e Apples 


Oranges 


e Lemons 


Footer 





lonic 给 app 黑 认 的 是 iOS 样 式 的 主题 ; 因此 ， 你 可 以 看 到 那个 圆圈 复 选 框 。 在 第 五 章 ， 
lonic 指 令 与 服务 中 我 们 将 学 习 如 果 修 改 他 。 


以 下 标记 显示 了 可 开 闭 的 的 切换 开关 : 


«ion-content class="padding"> 
«ul class="list"> 
<li class="item item-toggle"> 
Wifi 
<label class="toggle toggle-assertive"> 
<input type="checkbox"> 
«div class="track"> 
<div class="handle"></div> 
</div> 
</label> 
</li> 
<li class="item item-toggle"> 
Bluetooth 
<label class="toggle toggle-positive"> 
<input type="checkbox"> 
<div class="track"> 
<div class="handle"></div> 
</div> 
</label> 
</li> 
<li class="item item-toggle"> 
Aeroplane Mode 
<label class="toggle toggle-calm"> 
<input type="checkbox"> 
<div class="track"> 
<div class="handle"></div> 
</div> 
</label> 
</li> 
</ul> 
</ion-content> 


localhost:8100 


lonic Blank Starter 


Wifi 


Bluetooth 


Aeroplane Mode 
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， 我 们 将 会 给 基于 lonic CSS 的 ee ns 。 在 处 理 用 户 输入 的 时 候 ， 
便利 和 强大 的 组 件 。 最 佳 展示 范例 是 一 个 亮度 调节 滑 块 ， 看 起 来 是 这 样子 的 : 


c localhost:8100 


eft lonic Blank Starter light 





以 上 效果 图 需要 的 代码 是 这 样子 的 : 


<ion-content class="padding"> 
<div class="list"> 
<div class="item range range-positive"> 
<i class="icon ion-ios-sunny-outline"></i> 
<input type="range" name="volume" min="0" max="100" value="33"> 
<i class="icon ion-ios-sunny"></i> 
</div> 
</div> 
</ion-content> 


用 到 的 名 词 : 


整合 lonic CSS 组 件 与 AngularJS 


如 果 你 有 一 些 漂 亮 的 页 面 ， 里 面 有 很 些 很 酷 的 组 件 ， 但 是 他 们 在 实时 环境 中 we 都 不 做 ， 在 
这 种 情况 下 ， 我 们 需要 的 是 什么 ? 所 以 在 这 个 子 标题 中 ， 我 们 将 要 看 一 下 整合 这 些 美丽 的 
lonic 组 件 与 AngularJS 以 使 得 我 们 的 页 面 更 加 功能 化 。 

第 一 个 例子 用 来 处 理 的 是 ， 在 表单 域 全 部 有 效 之 前 禁用 表单 提交 。 我 们 将 要 创建 一 个 由 邮件 
地 址 和 密码 组 成 的 表单 。 在 用 户 输入 的 邮件 和 密码 的 长 度 最 少 为 3 之 前 ， 我 们 将 禁用 登录 按 
钮 。 

我 们 先 通过 以 下 命令 搭建 一 个 空白 模板 的 的 app : 


ionic start -a "Example 7" -i app.example.seven example7 blank 


接 下 里 ， 我 们 将 要 对 jindex.html 进 行 更 改 ， 给 他 添加 一 个 表单 和 一 个 名 为 ng-disabled 的 按钮 。 
当 邮 件 的 模型 值 和 密码 的 模型 值 都 是 fal/se 的 时 候 ng-disabled 的 值 为 true。 


M 


X T JavaScript P 4 (truthy) 1& (falsy) 49 PL » HAA 
http://adripofjavascript.com/blog/drips/truthyand-falsy-values-in-javascript.html 


www/index.htm/ 文 件 里 面相 关 代 码 应 该 是 这 样 的 : 


«div class="list"> 
«label class="item item-input"> 
«span class="input-label">Email</span> 
«input type-"email" ng-model="email"> 
</label> 
<label class="item item-input"> 
«span class="input -label">Password</span> 
<input type="password" ng-model="password" ng-minlength="3"> 
</label> 
<div class="padding"> 
<button ng-disabled="!email || !password" class="button button-block button-po 
sitive">Sign In</button> 
</div> 
</div> 


保存 文件 ， 然 后 运行 以 下 命令 : 


ionic serve 


3.3 整合 lonic CSS 组 件 与 AngularJS 


如 果 表 单 里 面 没有 输入 ， 或 者 输入 了 无 效 的 数据 ， 按 钮 将 被 禁用 ， 大 概 是 这 样子 的 : 


c localhost:8100 


Login Form 


Email 


Password 





如 果 表 单 输入 有 效 ， 按 钮 将 会 被 激活 : 


C localhost:8100 


Login Form 


Email arvind@user.com 


Password 


pm 





这 个 简单 的 示例 展示 了 AngularJS 和 lonic 如 何 一 起 工作 来 创建 一 个 伟大 的 用 户 体验 的 。 上 面 
的 范例 可 以 扩展 显示 有 效 信 息 。 

接 下 来 的 范例 中 ， 我 们 将 处 理 一 个 稍微 复杂 一 些 的 lonic 和 AngularJS 的 整合 。 我 们 将 实现 一 个 
简单 的 打分 小 部 件 。 这 个 小 部 件 是 由 5 个 匀 空 的 小 星星 组 成 的 。 当 用 户 点 击 其 中 任何 一 个 小 星 
星 来 打分 的 时 候 ， 我 们 将 会 对 从 开始 的 那个 星星 到 用 户 点 击 的 那个 星星 进行 填充 。 

运行 以 下 指令 以 创建 一 个 新 的 空白 模板 项 目 : 


ionic start -a "Example 8" -i app.example.eight example8 blank 


接 下 来 ， 在 www/js/app.js 中 添加 以 下 控制 器 代码 : 
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.controller('MainCtrl', ['$scope', function($scope) { 

$scope.ratingArr = [1 

value: 1, 

icon: 'ion-ios-star-outline' 
ht 

value: 2, 

icon: 'ion-ios-star-outline' 
}, í 

value: 3, 

icon: 'ion-ios-star-outline' 
}, { 

value: 4, 

icon: 'ion-ios-star-outline' 
}, í 

value: 5, 

icon: 'ion-ios-star-outline' 
il; 
$scope.setRating = function(val) { 

var rtgs = $scope.ratingArr; 

for (var i = 0; i < rtgs.length; i++) { 

if (i < val) { 


rtgs[i].icon = 'ion-ios-star'; 
) else { 
rtgs[i].icon - 'ion-ios-star-outline'; 


} 
je 
} 
311) 


如 上 代码 所 示 ， 我 们 创建 了 一 个 名 为 ratingArr 的 数组 。 这 个 数组 元 素 由 两 部 分 组 成 ， 星 星 的 值 
和 需要 应 用 到 星星 上 的 样式 。 我 们 也 创建 了 另 一 个 名 为 setRating() 的 方法 ， 这 个 方法 将 在 星 
星 被 点 击 的 时 候 进行 调用 。 这 个 方法 读 取 作 为 参数 传 入 的 星星 的 值 。 然后， 我 们 遍历 从 开始 
的 星星 到 选中 的 星星 的 所 有 的 打分 对 象 的， 我 们 将 图 标 设置 为 填 满 的 星星 ， 其 他 的 作为 轮 

Bk o 

www/index.html 的 body 部 分 将 是 如 下 : 


3.3 整合 lonic CSS 组 件 与 AngularJS 


«body ng-app="starter" ng-controller="MainCtrl"> 
<ion-pane> 
«ion-header-bar class="bar-positive"> 
<h1 class="title">Ionic Blank Starter</h1> 
</ion-header -bar> 
<ion-content class="padding"> 
«div class-"padding text-center"> 
<h3>Rate the App</h3> 
<div> 
«a hrefz"javascript:" ng-repeat="r in ratingArr" class="padding" 
style="text-decoration:none;"> 
<i class-"icon {{r.icon}}" ng-click="setRating(r.value)"></i> 
</a> 
</div> 
</div> 
</ion-content> 
</ion-pane> 
</body> 


我 们 给 body 标 签 添加 了 ng-controller 指 令 ， 在 ion-content 指 令 里 面 ， 我 们 有 添加 了 qdiv 用 来 在 


遍历 ratingArr 的 时 候 演 染 星星 。 
保存 完 所 有 文件 后 ， 运 行 : 


ionic serve 


你 可 以 看 到 如 下 : 
G localhost:8100 


lonic Blank Starter 


Rate the App 


j^ 
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3.3 整合 lonic CSS 组 件 与 AngularJS 


当 你 选择 了 第 三 个 星星 的 时 候 ， 显 示 效 果 差 不 多 是 这 样子 的 : 
localhost:8100 


lonic Blank Starter 


Rate the App 


* * * * * 





完成 这 些 之 后 ， 我 们 已 经 简单 理解 了 如 何 整合 lonic CSS 组 件 和 AngularJS。 下 一 个 主题 中 ， 
我 们 将 学 习 AngularUl 路 由 器 。 
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3.4 lonic 状 态 路 由 


用 到 的 名 词 : 


e router n. 路 由 器 

route v. 路 由 

AngularUl Router AngularUl 路 由 
e padding 填充 


e named views 命名 视图 


lonic 3 3 Z 


在 应 用 比较 小 只 有 几 个 页 面 的 情况 下 ， 维 护 状 态 和 管理 数据 将 会 比较 简单 。 但 是 当 应 用 变 得 
越 来 越 复 杂 的 时 候 ， 处 理 模 板 ， 模 板 数据 路 由 相关 数据 等 等 ， 将 会 变 的 很 难 。 


因此 ， 为 了 使 管理 复杂 多 页 面 lonic 应 用 变 得 简单 ， 我 们 使 用 lonic 路 由 器 。|onic 路 由 器 和 
AngularUl 路 由 器 一 样 。 更 多 信息 请 参考 : https://github.com/angular-ui/ui-router 


在 AngularUl 路 由 器 文件 里 : 


AngularUl Router is a routing framework for AngularJS, which allows you to organize 
the parts of your interface into a state machine. Unlike the $route service in the Angular 
ngRoute module, which is organized around URL routes, Ul-Router is organized around 
states, which may optionally have routes, as well as other behavior, attached. 
AngularUl 路 由 器 是 AngularJS 的 路 由 框架 ， 他 人 允许 将 你 的 接口 组 织 到 一 个 状态 机 里 面 。 
与 AngularJS ngRouter 里 面 的 $routeservice 以 URL 路 由 组 织 不 同 的 是 ，UI-Router 是 围绕 
状态 来 组 织 路 由 的 ， 它 可 以 选择 性 地 拥有 路 由 ， 行 为 及 附件 。 


更 多 关于 AngularUl 路 由 的 信息 ， 参 考 : https://github.com/angular-ui/ui-router/wiki 


一 个 简单 的 双 页 app 


lonic 源 码 里 面 捆 缚 了 AngularUl。 所 以 ， 在 我 们 将 lonic 添 加 为 依赖 之 后 ， 我 们 可 以 直接 注 

入 gstateProviaer 和 gumRouterProviaer 到 我 们 的 config 方 法 中 来 ， 以 此 建立 路 由 。 我 们 将 通过 
一 些 范例 学 习 路 由 。 

第 一 个 范例 中 ， 我 们 将 创建 一 个 双 页 应 用 。 一 个 导航 按钮 在 两 个 页 面 之 中 进行 导航 。 这 个 范 
例 的 目的 是 了 解 路 由 器 的 语法 和 设置 ， 这 样 我 们 可 以 将 相同 的 逻辑 应 用 到 其 他 范例 中 。 

我 们 将 创建 一 个 空白 模板 项 目 ， 然 后 给 他 添加 路 由 ， 这 样 他 就 变 成 了 一 个 多 页 面 应 用 。 

执行 以 下 命令 创建 一 个 空白 模板 项 目 : 


ionic start -a "Example 9" -i app.example.nine example9 blank 


一 旦 app 创 建成 功 以 后 ， 打 开 www/js/app.js。 我 们 将 要 创建 一 个 名 为 config 的 方法 然后 为 我 们 
的 app 添 加 路 由 。 我 们 将 在 www/js/app.js 的 run 方 法 后 面 添加 以 下 config 方 法 : 


.config(function ($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('view1', { 
url: '/view1', 
template: '«div class="padding"><h2>View 1</h2><button class="button button-po 
sitive" ui-sref="view2">To View 2</button></div>' 


}) 
.State('view2', { 
url: '/view2', 
template: '«div class="padding"><h2>View 2</h2><button class="button button-as 
sertive" ui-sref="view1">To View 1</button></div>' 


}) 


$urlRouterProvider.otherwise('/view1'); 


}) 


就 像 你 看 到 的 一 样 ，$stateProvider 和 $urlRouterProvider 作 为 依赖 注入 到 了 config 方 法 。 参 考 
主页 可 知 这 些 服务 是 和 |onic 包 一 起 发 布 出 来 的 。 

接 下 来 ， 我 们 使 用 $stateProvider 来 定义 应 用 的 状态 。 在 这 个 案例 中 ， 状 态 和 视图 是 一 样 的 。 

$stateProver 上 的 state 方 法 是 用 来 声明 路 由 的 。 方 法 的 第 一 个 参数 是 状态 的 可 读 名 。 第 二 个 参 

数 是 由 路 由 配置 组 成 的 一 个 对 象 。 作 为 路 由 配置 的 一 部 分 ， 我 们 提供 了 一 个 URL 和 当 触 发 

URL 时 用 做 演 染 的 一 个 模板 。 

在 上 面 的 配置 中 ， 我 们 创建 了 两 个 状态 : 一 个 叫做 view1T， 这 od NB 

到 http://localhost:8100/#View1 的 时 候 激活 ， 第 二 个 叫做 View2， 这 个 将 在 导航 

8| http:;//localhost:8100/tt/view285] | 4& 3 E © 

当 你 观察 URL 的 时 候 ， 会 发 现在 view 的 名 字 的 前 mu 哈 希 )。 这 个 哈 希 告诉 浏览 器 

不 需要 向 服务 器 发 起 资源 请 求 ; 取而代之 的 是 ， 这 些 资源 都 是 在 客户 端的 ，JavaScript 框 架 

HR TKI HWA © 

简单 来 说 ， 让 URL 哈 希 后 面 的 任何 东西 改变 的 时 候 ， do 出 一 个 hashchange 的 事件 。 路 由 器 

有 监听 器 ， 这 些 监听 器 会 在 事件 发 出 的 时 候 被 激活 。 这 个 监听 器 将 负责 根据 哈 希 值 (view 

或 者 view2) 和 他 的 状态 配置 来 管理 Ul。 (简单 讲 ， Pa 时 候 ， 路 由 将 为 改变 了 的 哈 

希 调用 对 应 的 控制 器 和 模板 ) 

注意 ， 我 们 已 经 为 视图 编写 了 泻 染 用 的 模板 。 在 下 一 个 范例 中 我 们 将 学 习 使 用 外 部 文件 作为 

模板 。 同时 按钮 有 一 个 名 为 ui-sref 的 指令 http://angular- 

ui.github.io/uirouter/site/#/api/ui.router.state.directive:ui-sref) ° Wi-sref 指 令 用 于 将 链接 绑 定 

到 状态 。 如 果 状 态 有 一 个 关联 的 URL， 这 条 指令 将 自动 生成 和 更 新 href。 

所 以 ， 在 我 们 的 场景 中 ， 当 我 们 点 击 View1 模 板 里 面 呈 现 的 那个 按钮 的 时 候 ，app 将 导航 

到 View2， 反 之 亦 然 。 

最 后 ， 我 们 给 config 方 法 提供 一 个 默认 的 URL 作 为 结束 : 


$urlRouterProvider .otherwise('/view1'); 


在 上 面 这 一 行 代 码 中 ， 我 们 指定 了 默认 的 URL， 当 当前 URL 不 能 匹配 任何 配置 的 状态 URL 的 
时 候 ， 用 户 将 会 被 重 定向 到 view1 状 态 。/ 

有 了 这 些 ， 我 们 就 已 经 成 功 的 设置 了 状态 。 但 是 对 于 设置 来 讲 ， 我 们 还 有 一 个 关键 的 部 分 
我 们 需要 告知 路 由 器 页 面 的 哪些 部 分 需要 使 用 状态 的 内 容 去 更 新 。 这 一 步 通 过 在 我 们 的 
index.html 中 添加 ion-nav-view 就 可 以 达到 了 。 


对 于 状态 路 由 器 来 将 ，ion-nav-view 和 Ui-view 同 样 适 用 。ion-nav-view 扩 展 自 ui-view, 然 后 
添加 了 一 些 功能 例如 动画 和 历史 。 


在 index.html 中 ， 将 ion-content 蔡 换 为 以 下 代码 : 


<ion-nav-view class="has-header"></ion-nav-view> 


has-header 类 在 容器 的 顶部 添加 了 一 个 padding。 这 样 就 确保 了 模板 内 容 不 会 是 从 页 头条 的 后 
面 开 始 。 
完整 的 jindex.htm/ 的 body 代 码 如 下 : 


<body ng-app="starter"> 
<ion-pane> 
<ion-header-bar class="bar-stable"> 
«hi class="title">Two Page Application</h1> 
</ion-header -bar> 
«ion-nav-view class="has-header"></ion-nav-view> 
</ion-pane> 
</body> 


保存 所 有 文件 然后 运行 以 下 命令 : 


ionic serve 


3.4 lonic 状 态 路 由 


你 将 会 看 到 下 面 截屏 的 效果 : 


€ C localhost:8100/#/view1 


Two Page Application 


View 1 


3 At To View2 按 钮 的 时 候 ， 他 会 将 你 带 到 View2， 如 下 : 





& | localhost:8 100/#/view2 


Two Page Application 


View 2 





注意 观察 导航 后 的 URL © 

接 下 来 的 范例 中 ， 我 们 将 在 单独 的 HTML 文 件 中 创建 模板 然后 在 咱们 的 路 由 器 中 进行 配置 。 同 
时 ， 我 们 也 将 为 config 对 象 引入 新 的 属性 ， 名 为 controller 。 

我 们 将 要 创建 的 是 一 个 双 页 的 app ; 第 一 个 页 面 上 我 们 早先 创建 的 登录 表单 ， 第 二 页 是 那个 打 
分 页 。 


这 个 范例 的 目标 是 理解 外 部 模板 和 给 视图 绑 定 控制 器 。 老 规矩 ， 新 建 一 个 空白 模板 项 目 : 


ionic start -a "Example 10" -i app.example.ten example10 blank 


接 下 来 ， 我 们 将 要 设置 路 由 了 。 给 Www/js/app.js 添 加 一 个 config 方 法 ， 如 下 : 


.config(function($stateProvider, $urlRouterProvider) ( 
$stateProvider 
.state('login', { 
url: '/login', 
templateUrl: 'templates/login.html', 
controller: 'LoginCtrl' 


}) 

.State('app', { 
url: '/app', 
templateUrl: 'templates/app.html', 
controller: 'AppCtrl' 


3) 


$urlRouterProvider.otherwise('/login'); 


}) 


我 们 有 两 个 状态 :login 和 app。 我 们 用 来 一 个 新 的 属性 名 为 femplateUrl 蔡 换 之 前 的 template。 
templateUr| 是 模板 文件 的 位 置 。 模 板 文件 可 以 是 硬盘 上 的 一 个 单独 的 文件 ， 也 可 以 

是 index.html 的 一 部 分 ， 例 如 script 标 签 。 两 种 途径 我 们 会 都 试验 一 下 。 

我 们 也 添加 了 一 个 名 为 controller 的 新 属性 。 这 个 属性 告诉 路 由 器 当 导 航 到 一 个 路 由 的 时 候 需 
要 调用 哪 一 个 控制 器 。 如 你 所 见 ， 我 们 将 要 为 两 个 控制 器 创建 两 个 视图 。 

为 了 使 用 基于 script 标 签 的 模板 开始 ， 我 们 将 创建 两 个 空 的 控制 器 。 在 www/js/app.js 文 件 的 
1Un 方 法 后 面 ， 加 上 以 下 代码 : 


.controller('LoginCtrl', function ($scope) { 


im 
.controller('AppCtrl', function ($scope) { 


}) 


由 于 我 们 已 经 在 route 配 置 中 声明 了 控制 器 ，AngularJS 会 在 导航 到 视图 的 时 候 去 查找 相应 的 控 
制 器 。 有 鉴于 此 ， 我 们 创建 了 两 个 假 的 控制 器 。 功 能 代码 稍 后 添加 进去 。 
接 下 来 ， 在 我 们 的 www/index.html 中 ， 我 们 将 使 用 以 下 代码 蔡 换 其 中 的 jon-content : 


<ion-nav-view class="has-header"></ion-nav-view> 


你 可 以 在 body 标 签 的 任何 地 方 添加 这 个 模板 。www/index.html 的 body 部 分 代码 如 下 : 


«body ng-app="starter"> 
<ion-pane> 
<ion-header-bar class="bar-stable"> 
«hi class="title">My Awesome App</h1i> 


</ion-header -bar> 
«ion-nav-view class="has-header"></ion-nav-view> 


</ion-pane> 
«script type="text/ng-template" id-"templates/login.html"» 


<hi>Login Template</hi> 
<button class="button button-calm" ui-sref="app">To App</button> 


</script> 
«script type-"text/ng-template" id-"templates/app.html"» 


<hi>App Template</hi> 
«button class="button button-royal" ui-sref="login">To 


Login</button> 
</script> 
</body> 


留意 script 标 签 上 的 jd 属性 。 他 们 跟 templateUrl 是 一 样 的 。 这 就 是 用 来 连接 脚本 tag/ng- 
template 到 路 由 templateUr| 的 钓 子 。 
保存 所 有 文件 ， 运 行 如 下 命令 : 


ionic serve 


你 将 看 到 如 下 结果 : 


€ C localhost:8100/£/login 


My Awesome App 


Login Template 





当 点 击 To App 按 钮 的 时 候 ， 将 会 看 到 如 下 视图 : 


C localhost:8100/#/app 


My Awesome App 


pp Template 


To Login 





上 面 的 范例 示范 了 如 何 使 用 script 标 签 在 HTML 文 件 里 写 模 板 的 。 

在 继续 我 们 的 丨 实 案例 之 前 ， 移 除 我 们 在 www/index.html 里 面 的 内 联 模板 。 

我 们 将 在 www 文 件 夹 里 面 创建 一 个 名 为 templates 的 文件 夹 -不 是 项 目 根 目录 ， 是 WwW 文件 
夹 ， 千 万 记 住 了 。 

在 templates 文 件 末 里面， 新建 一 个 文件 名 为 login.html。 文 件 内 容 和 我 们 在 example7 中 用 的 
是 一 模 一 样 的 。login.htm/ 文 件 看 起 来 是 普 紫 的 : 


«div class="list"> 
«label class="item item-input"> 
<span class="input-label">Email</span> 
<input type="email" ng-model="email"> 
</label> 
«label class="item item-input"> 
«span class="input-label">Password</span> 
<input type="password" ng-model="password" 
ng-minlength="3"> 
</label> 
<div class="padding"> 
«button ui-sref-"app" ng-disabled-"!email || !password" class="button button-b 
lock button-positive">Sign In</button> 
</div> 
</div> 


需要 注意 的 是 ， 我 们 给 按钮 添加 了 Ui-sref。 在 按钮 没有 被 激活 之 前 ， 点 击 这 个 按钮 是 不 会 被 重 
定向 到 app 视 图 的 。 

接 下 来 ， 在 templates 文 件 夹 下 面 新 建 一 个 名 为 app.html 的 文件 。 文 件 内 容 和 我 们 在 example8 
里 面 的 是 一 样 的 ， 如 下 : 


«div class-"padding text-center"> 
<h3>Rate the App</h3> 
<div> 
«a href="javascript:" ng-repeat-"r in ratingArr" class="padding" style="text-d 


ecoration:none;"> 
«i class="icon {{r.icon}}" ng-click="setRating(r.value)"></i> 
</a> 
</div> 
<button ui-sref="login" class="button button-block 
button-clam">Sign Out</button> 


</div> 


当 你 保存 好 了 这 些 文件 之 后 ， 回 到 页 面 ， 你 就 会 发 现 login 页 面 出 现 了 。 当 你 输入 了 一 个 有 效 
的 邮件 地 址 和 一 个 超过 3 个 字符 的 密码 的 时 候 ，sign-in 按 钮 将 被 激活 。 当 你 点 击 Sign iniz4z 
的 时 候 ， 他 会 把 你 带 到 app 视 图 去 。 
如 果 你 没 看 到 更 新 后 的 Ul， 这 意味 着 你 还 没有 删除 www/index.html 里 面 的 基于 脚本 的 模 
板 。scirpt 标 签 写 入 的 模板 的 优先 级 高 于 硬盘 里 面 的 模板 ， 且 硬盘 里 面 的 模板 需要 通过 
AJAX 请 求 才能 得 到 。 关 于 更 多 的 AngularJS 模 板 缓存 ， 请 参考 : 
https://docs.angularjs.org/api/ng/service/$templateCache 


打开 app 视 图 的 时 候 ， 会 发 现 小 星星 部 件 了 。 这 是 因为 我 们 的 小 星星 都 是 基于 一 个 名 
为 ratingArr 的 区 域 变量 的 。 我 们 将 会 像 在 example8 里 面 那 样 更 新 我 们 的 AppCtri: 


.controller('AppCtrl', function($scope) ( 
$scope.ratingArr = [1 


value: 1, 

icon: 'ion-ios-star-outline' 
5t 

value: 2, 

icon: 'ion-ios-star-outline' 
ht 

value: 3, 

icon: 'ion-ios-star-outline' 
ho 

value: 4, 

icon: 'ion-ios-star-outline' 
ht 

value: 5, 


icon: 'ion-ios-star-outline' 
il 
$scope.setRating - function(val) ( 
var rtgs - $scope.ratingArr; 
for (var i = 0; i < rtgs.length; i++) { 
if (i < val) { 


rtgs[i].icon = 'ion-ios-star'; 
) else { 
rtgs[i].icon = 'ion-ios-star-outline'; 


un 
}) 


现在 ， 当 你 返回 查看 视图 的 时 候 ， 会 发 现 小 星星 又 出 现 了 ， 当 你 点 击 他 们 的 时 候 ， 一 切 如 你 
预期 一 样 : 


€ 2 C localhost:8100/#/app 


My Awesome App 


Rate the App 


x EE ok ox X 
t P 


Sign Out 





虽然 ， 我 们 将 LoginCtn 留 室 。 只 要 你 想 要 ， 你 就 可 以 给 Submit 按 钮 绑 定 一 个 ng-cjick 然 后 在 控 
制 器 里 面 调用 一 个 方法 做 你 的 有 效 验 证 。 你 可 以 从 按钮 标签 移 除 Ui-sref 属 性 使 用 控制 器 里 面 
的 $state 服 务 导 航 到 app 视 图 。www/templates/login.html 可 以 用 以 下 代码 替换 掉 : 


«button ng-click="validate()" ng-disabled-"!email || !password" class="button button-b 
lock button-positive"»Sign In</button> 


AG www/js/app.js X. a % LoginCtrl Z 3& ANB TF : 


.controller('LoginCtrl', function($scope, $state) { 
$scope.validate = function() 1 

// some other validations... 

$state.go('app'); 

} 

}) 


下 一 个 范例 中 ， 我 们 将 使 用 状态 路 由 建立 一 个 稍微 复杂 一 些 的 UI。 我 们 将 建立 一 个 标签 组 
件 。 但 是 ， 首 先 ， 我 们 的 看 一 下 AngularUl 路 由 器 里 面 的 命名 视图 。 

假设 在 这 么 一 个 情景 里 ， 当 我 们 路 由 改变 的 时 候 页 面 有 3 个 地 方 需要 更 新 。 使 用 AngularJS 的 
ngRoute 的 话 ， 是 做 不 到 的 ， 因 为 hgRoute 路 由 器 只 允许 我 们 每 个 app 里 面 存 在 一 个 ng-view 。 
但 是 AngularUl 路 由 器 提供 了 一 些 名 为 “命名 视图 "的 东西 ， 在 这 里 你 可 以 在 页 面 上 有 多 个 ui- 
View 并 且 对 他 们 命名 。 这 样 ， 根 据 视图 状态 的 不 同 ， 将 会 在 这 些 视图 里 面 加 载 不 同 的 模板 。 
考虑 以 下 HTML ， 我 们 在 一 个 页 面 上 有 3 个 视图 部 分 : 


<body> 
«div ui-view="partialviewi"></div> 
<div ui-view="partialview2"></div> 
<div ui-view="partialview3"></div> 
</body> 


这 样 ， 当 配置 我 们 的 路 由 的 时 候 ， 我 们 将 在 我 们 路 由 配置 对 象 中 引入 一 个 新 的 属性 ， 名 
Aviews: 随后 ， 我 们 将 设计 当 状 态 改变 的 时 候 ， 需 要 调用 哪 一 个 控制 器 和 模板 。 例 如 : 


$stateProvider 
.state('page1', { 
views: { 

'partialviewi1': { 
templateUrl: 'pagei-partialviewi.html', 
controller: 'PagedPartialview1Ctrl' 

3 

'partialview2': { 
templateUrl: 'pagei-partialview2.html', 
controller: 'PagediPartialview2Ctrl' 

3 

'partialviewS3': { 
templateUrl: 'pagei-partialviewS3.html', 
controller: 'PagedPartialviewS3Ctrl' 


3) 
.state('page2', { 
views: { 
'partialviewi1': { 
templateUrl: 'page2-partialviewi.html', 
controller: 'Page2Partialview1Ctrl' 
3 
'partialview2': { 
templateUrl: 'page2-partialview2.html', 
controller: 'Page2Partialview2Ctrl' 
3 
'partialviewS3': { 
templateUrl: 'page2-partialviewS3.html', 
controller: 'Page2PartialviewS3Ctrl' 


39, 


如 你 所 见 ， 当 你 在 page1 状 态 的 时 候 ， 三 个 命名 视图 都 将 调用 对 于 的 视图 和 控制 器 ，page2 也 
是 如 此 。 

为 将 相同 的 理念 带 入 lonic， 我 们 将 对 jon-nav-view 指 令 添 加 name 属 性 然后 使 用 他 来 进行 命名 
视图 的 工作 。 我 们 将 使 用 两 个 或 者 或 者 两 个 标签 页 来 构建 一 个 页 面 。 

还 是 用 以 下 命令 搭建 一 个 新 的 空白 模板 项 目 : 


ionic start -a "Example 11" -i app.example.eleven exampleii blank 


我 们 的 标签 界面 将 会 有 两 个 标签 页 -login 和 register。 在 模 组 初始 化 完成 之 后 ， 我 们 将 会 
在 www/js/app.js 中 去 配置 这 两 个 状态 : 


.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('login', { 
url: '/login', 
views: { 
login: { 
templateUrl: 'templates/login.html' 


}) 
.State('register', { 
url: '/register', 
views: { 
register: { 
templateUrl: 'templates/register.html' 


3) 


$urlRouterProvider.otherwise('/login'); 


t) 


注意 观察 View 属 性 ， 以 及 他 的 子 属性 (/ogin 和 1egijste 门 的 名 称 。 这 就 是 我 们 声明 views 对 象 的 方 
法 。 
接 下 来 ， 我 们 将 会 使 用 lonic tabs 指 令 (http://ionicframework.com/docs/api/directive/ionTabs/) 
进行 工作 。 这 是 个 非常 简单 的 指令 ， 他 使 用 ion-tabs 指 令 包 装 了 ion-tab 指 令 来 创建 一 个 标签 界 
as 

这 样 一 来 ， 在 我 们 的 wwwnaex.htm/ 中 ， 我 们 将 body 标 签 部 分 的 代码 替换 为 以 下 : 


<body ng-app="starter"> 
<ion-nav-bar class="bar-royal"> 
</ion-nav-bar> 
<ion-tabs class="tabs-royal"> 
<ion-tab icon="ion-power" ui-sref="login"> 
<ion-nav-view name="login"></ion-nav-view> 
</ion-tab> 
<ion-tab icon="ion-person-add" ui-sref="register"> 
<ion-nav-view name="register"></ion-nav-view> 
</ion-tab> 
</ion-tabs> 
</body> 


如 你 所 见 ，ion-tabs 指 令 是 由 两 个 jon-tab 指 令 组 成 的 ，ion-tab 指 令 是 由 ion-nav-view 作 为 内 容 
视图 的 。 每 个 jon-nav-view 都 设置 了 需要 加 载 的 name 属 性 。 

现在 我 们 要 做 的 是 搭建 这 两 个 模板 。 在 Www 文 件 夹 内 新 建 一 个 名 为 femplates 的 文件 夹 ， 然 后 
在 其 中 新 建 一 个 名 为 login.html 的 文件 。www/templates/login.html 文 件 的 内 容 如 下 : 


«ion-view view-title="Login"> 
«ion-content class="padding"> 
«div class="list"> 
«label class="item item-input"> 
«span class="input -label">Email</span> 
<input type="email" ng-model="email"> 
</label> 
<label class="item item-input"> 
<span class="input-label">Password</span> 
<input type="password" ng-model="password" 
ng-minlength="3"> 
</label> 
<div class="padding"> 
<button ng-disabled="!email || !password" class="button button-block b 
utton-royal">Sign In</button> 
</div> 
</div> 
</ion-content> 


</ion-view> 


注意 看 我 们 是 如 何在 jon-view 指 令 里 面包 装 模 块 的 ， 然 后 是 在 jon-conent 指 令 里 。 接 下 来 ， 
在 www/templates 下 面 ， 新 建 一 个 名 为 register.html 的 文件 ， 内 容 如 下 : 


«ion-view view-title="Register"> 
«ion-content class="padding"> 
«div class="list"> 
«label class="item item-input"> 
«span class="input-label">Email</span> 
«input type="email" ng-model="email"> 
</label> 
<label class="item item-input"> 
<span class="input -label">Password</span> 
<input type="password" ng-model="password" 
ng-minlength="3"> 
</label> 
<label class="item item-input"> 
<span class="input-label">Re-Enter Password</span> 
<input type="password" ng-model="password2" 
ng-minlength="3"> 
</label> 
<div class="padding"> 


<button ng-disabled="(!email || !password) || (password != password2)" 
class="button button-block buttonroyal">Sign In</button> 
</div> 
</div> 


</ion-content> 


</ion-view> 


保存 所 有 文件 然后 运行 如 下 命令 : 


3.4 lonic 状 态 路 由 


ionic serve 


效果 图 如 下 : 


€ c localhost:8100/#/login € Q |} localhost:8100/#/register 


Register 


Email Email 


Password Password 


Re-Enter Password 





在 上 面 的 范例 中 ， 我 们 使 用 开始 模板 ， 从 无 到 有 的 建立 了 一 个 标签 组 件 。 我 们 不 用 每 次 都 这 
么 做 。 因 为 我 们 有 对 应 的 项 目 模板 。 我 们 可 以 很 快 的 通过 以 下 命令 来 新 建 一 个 标签 页 项 目 : 


ionic start -a "Example 12" -i app.example.twelve example12 tabs 


一 旦 标签 页 模板 项 目 搭 建 完成 ， 进 入 Www/js/app.js 然 后 滚动 config 方 法 ， 你 将 会 看 到 app 的 路 
由 配置 。 如 下 : 


89 


.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('tab', { 
url: "/tab", 
abstract: true, 
templateUrl: "templates/tabs.html" 
3) 
.state('tab.dash', { 
url: '/dash', 
views: { 
'tab-dash': { 
templateUrl: 'templates/tab-dash.html', 
controller: 'DashCtrl' 


3) 
.state('tab.chats', { 
url: '/chats', 
views: { 
'tab-chats': { 
templateUrl: 'templates/tab-chats.html', 
controller: 'ChatsCtrl' 


}) 
.State('tab.chat-detail', { 
url: '/chats/:chatId', 
views: { 
'tab-chats': { 
templateUrl: 'templates/chat-detail.html', 
controller: 'ChatDetailCtrl' 


15) 
.state('tab.account', { 
url: '/account', 
views: { 
'tab-account': ( 
templateUrl: 'templates/tab-account.html', 
controller: 'AccountCtrl' 


3); 


$urlRouterProvider.otherwise('/tab/dash'); 


3); 


如 果 你 有 留意 的 话 ， 会 发 现 1ab 状 态 属性 有 一 个 新 的 属性 叫做 abstract 设 置 为 tue。 抽 象 状 态 是 
不 能 切换 过 去 的 。 他 只 会 在 他 的 一 个 子 类 激活 的 时 候 被 激活 。 

在 我 们 的 场景 中 ，tab 持 有 者 将 会 是 一 个 抽象 状态 ， 并 且 当 他 的 子 tab 激 活 的 时 候 ， 这 个 tab 状 
态 都 将 自动 激活 。 


更 多 关于 抽象 状态 的 信息 ， 参 考 : https://github.com/angular-ui/ui-router/wiki/Nested- 
States-%26-NestedViews#abstract-states 


当 你 打开 templates/tabs.html 的 时 候 ， 你 可 以 看 到 ion-tabs 指 令 是 设置 在 一 个 模板 文件 里 面 的 
而 不 是 像 之 前 的 范例 一 样 设置 在 index.htm/ 里 面 的 。 这 个 模板 将 作为 tfabs 组 件 的 抽 葵 状态 进行 
工作 。 同 时 ， 你 也 可 以 发 现 ，tab-dash.html，tab-chats.html 以 及 tab-account.html 和 我 们 上 
一 个 范例 的 架构 方式 是 一 样 的 。 

使 用 如 下 口令 运行 app 进 行 测试 : 


ionic serve 


你 大 概 会 看 到 ， 当 你 点 击 chat 列 表 里 面 的 一 个 条 目的 时 候 ， 会 把 你 带 到 一 个 新 的 视图 展示 详细 
信息 。 这 种 设置 叫做 主 详情 视图 (master detail view) > “master t Jp X 7| & > "detail" X Jr 
天 详情 。 同时 ， 注 意 看 不 同 的 聊天 URL 不 一 样 ， 例 如 : http://localhost:8100/#/tab/chats/0#e 
http://localhost:8100/#/tab/chats/1 等 等 。 去 www/js/app.js 中 查看 tab.chat-detail 的 状态 配置 的 
时 候 ， 可 以 看 到 如 下 代码 : 


.state('tab.chat-detail', ( 
url: '/chats/:chatId', 
views: { 
'tab-chats': { 
templateUrl: 'templates/chat-detail.html', 
controller: 'ChatDetailCtrl' 


}) 


Ur 属性 的 值 是 Ychats/:chatld'。 注 意 chatld 前 面 的 冒号 。 这 里 告诉 路 由 器 chat/d 是 一 个 动态 值 ; 
当 遇 到 这 个 路 由 的 时 候 ， 在 chats 部 分 之 后 在 验证 路 由 ， RL hae 分 后 面 的 值 的 存 
储 到 一 个 名 为 chat/q 的 变量 里 。 现 在 ， 当 我 们 实时 处 理 我 们 的 应 用 的 时 候 ， 这 个 值 将 可 以 
在 $stateParams 上 得 到 。 参 考 www/js/controllers.js -ChatDetailCtrl : 


.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) { 
$scope.chat = Chats.get($stateParams.chatId); 
3) 


以 上 代码 向 你 展示 如 何 对 标签 视图 和 一 个 主 详情 视图 进行 混合 与 匹配 。 
你 也 可 以 试 试 搭建 一 个 siqemenu 模 板 然 后 看 侧 边 菜单 配置 路 由 的 。 
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在 本 章 中 ， 我 们 学 习 了 大 部 分 的 lonic CSS 组 件 。 我 们 也 看 过 了 可 用 的 一 些 颜 色 样本 。 接 下 
来 ， 我 们 整合 lonic CSS 组 件 与 AngularJS 并 添加 了 一 些 功 能 。 我 们 从 0 开始 使 用 lonic 状 态 路 
由 器 进行 工作 ， 创 建 了 一 个 简单 的 双 页 面 app。 有 最后， 我 们 探索 了 标签 页 界面 和 主 详情 视图 。 
在 接 下 来 的 章节 里 ， 我 们 将 会 学 习 使 用 强力 的 SCSS 来 定制 lonic CSS 。 


A 
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四 章 lonicZ SCSS 


在 本 章 中 ， 我 们 将 学 习 如 何 全 方位 的 对 lonic app 进 行 定 制 。lonic 黑 认 有 7 种 预定 义 的 色调 ， 或 
者 说 颜色 样本 。 在 本 章 中 ， 我 们 将 对 这 些 凑 色 进 行 编辑 ， 然 后 更 改 lonic 组 件 的 外 观 和 感觉 。 
本 章 的 目的 是 理解 如 何 使 用 lonic SCSS， 所 以 不 会 专注 于 特定 组 件 的 讲解 。 


本 章 中 ， 我 们 将 涵盖 以 下 主题 : 


SASS vs. SCSS 

设置 SCSS 

4 HSCSS* € 

使 用 SCSS 混 合式 

给 一 个 侧 边 菜单 app 定 制 主题 
关于 本 章 ， 你 也 可 以 通过 以 下 Github 目 录 来 访问 源 代码 ， 发 起 issue， 与 作者 沟通 : 
https://github.com/learning-ionic/Chapter-4 


4.1 SASS vs. SCSS 


用 到 的 名 词 : 


e pre-process fh HA 

e programmable 可 编程 的 
e Semi-colons 分 号 

e brace 花 括 号 

e function 4 žr 

e mixins 混合 式 

e CSS-like synax 类 CSS 语 法 


什么 是 Sass? 


根据 Sass 文 档 http://sass-lang.com/documentation/ : 


Sass is an extension of CSS that adds power and elegance to the basic language. It 
allows you to use variables, nested rules, mixins, inline imports, and more, all with a 
fully CSS-compatible syntax. Sass helps keep large stylesheets well organized, and get 
small stylesheets up and running quickly. Sass 是 一 个 CSS 的 扩展 ， 给 CSS 这 门 基本 语言 
添加 了 力量 与 优雅 。 他 允许 你 使 用 变量 ， 肯 入 规则 ， 混 入 ， 内 联 导 入 等 等 ， 所 有 这 些 特 
性 都 是 完全 兼容 CSS 语 法 的 。Sass 帮 助 良好 的 组 织 大 型 的 样式 表 ， 对 于 小 型 表单 使 它 结 
构 简单 ， 运 行 加 速 。 


简单 来 说 ，Sass 使 得 SCSS 可 编程 。 你 也 许 会 问 为 什么 我 们 这 章 讲 的 是 SCSS > 而 这 里 却 在 讲 
Sass。 是 这 样 的 Sass 和 SCSS 一 样 是 一 个 CSS 预 处 理 器 ，CSS 预 处 理 器 可 以 用 他 自己 的 方法 
来 编写 pre-CSS 语 法 。 


Sass 是 作为 另 一 个 名 为 HAML 的 预 处 理 器 的 一 部 分 由 一 群 Ruby 开 发 者 开发 出 来 的 。 因此， 他 
从 Ruby 那 里 继承 了 大 量 的 语法 样式 ， 例 如 躲 进 ， 没 有 花 括号 ， 没 有 分 号 等 等 。 
以 下 是 一 个 Sass 文 件 的 范例 : 


// app.sass 
brand-primary- blue 
.container 
color- !brand-primary 
margin- Opx auto 
padding- 20px 
-border-radius(!radius) 
-webkit-border-radius- !radius 
-moz-border-radius- !radius 


border-radius- !radius 


*border-radius(0px) 
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当 通 过 一 个 Sass 编 译 器 运行 以 上 Sass 代 码 的 时 候 ， 他 返回 了 一 个 老式 的 良好 的 CSS。 生 成 的 
CSS 大 概 是 这 样 的 : 


.container { 
color: blue; 
margin: Opx auto; 
padding: 20px; 


} 

Yat 
-webkit-border-radius: Opx; 
-moz-border-radius: Opx; 
border-radius: 0px; 


但 是 你 有 没有 注意 到 在 Sass 代 码 中 有 一 个 brand-pmmary 作 为 一 个 变量 ， 在 container 中 替换 了 
他 的 值 的 ， 或 者 border-radius 作 为 一 个 函数 (也 可 以 叫 如 混合 式 ) 当 使 用 参数 调用 的 时 候 生 
成 CSS 规 则 ? 这 些 在 CSS 都 不 见 了 。 

哪些 使 用 bracket-based 编 程 语言 的 人 们 这 么 些 代 码 有 点 费劲 。 于 是 ，SCSS 就 出 现 了 。 
Sass 是 Syntactically Aswsome Style Sheet (语法 牛 逼 的 样式 表 ) 的 简写 ，SCSS 是 Sassy 
CSS (时 最 的 CSS) 的 简写 。 SCSS 和 Sass 非 常 像 ， 除 了 类 CSS 语 法 。 如 果 使 用 SCSS 写 入 
上 Sass 代 码 的 话 ， 是 这 样子 的 : 


// app.scss 

$brand-primary: blue; 

.container( 
color: !brand-primary; 
margin: Opx auto; 
padding: 20px; 

H 

@mixin border-radius($radius) { 
-webkit-border-radius: $radius; 
-moz-border-radius: $radius; 
border-radius: $radius; 


} 
Den 
@include border-radius(5px); 


} 


这 个 看 起 来 离 CSS 靠 近 了 些 ， 对 吧 ? 这 个 令 人 印象 深刻 。lonic 使 用 SCSS 给 他 的 组 件 样式 化 。 


关于 更 多 的 SCSS vs. Sass 的 信息 ， 可 以 参考 这 个 帖子 : 
ai 


现在 ， 我 们 对 SCSS 和 Sass 有 了 一 个 初步 的 了 解 ， 我 们 将 在 lonic app 中 对 组 件 制定 主题 的 时 
候 对 他 们 进行 评估 。 


4.1 SASS vs. SCSS 
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用 到 的 名 词 : 


e dependencies 依赖 库 


在 lonic 项 目 中 使 用 SCSS 


下 面 我 们 将 要 在 已 有 的 lonic 项 目 中 设置 SCSS。 我 们 将 从 新 建 一 个 空白 模板 的 项 目 开始 。 新 建 
一 个 文件 夹 名 为 chapter4 然 后 在 其 中 打开 终端 /命令 行 ， 运 行 : 


ionic start -a "Example 13" -i app.example.thirteen example13 tabs 


我 们 可 以 通过 两 种 方式 在 项 目 中 设置 SCSS : 


e 手动 设置 
e lonic CLI 任 务 


手动 设置 SCSS 
遵循 以 下 步骤 ， 手 动 设置 SCSS : 


1. 使 用 cq 命令 ， 进 入 example13 : cd example13 
2. 安装 所 必需 的 依赖 库 。 利 用 模板 搭建 的 lonic 项 目 都 会 有 一 个 package.json 文 件 。 这 个 文 
件 里 面 有 设置 SCSS 需 要 的 所 有 的 依赖 。 同 时 ， 项 目 也 有 一 个 gulpFile.js 文 件 ， 这 个 文件 
也 定义 好 了 SCSS 任 务 ， 这 个 任务 是 用 来 监视 SCSS 文 件 的 更 改 ， 并 即时 编译 成 CSS 文 件 
的 。 
3， 运 行 以 下 命令 可 以 安装 这 些 依赖 : npm install 
4. 如 果 你 没有 全 局 安装 Gulp， 可 以 通过 以 下 命令 全 局 安装 : npm install gulp --global 
5， 接 下 来 ， 打 开 www/index.htm/ 文 件 ， 在 head 标 签 里 面 有 一 行 注释 掉 的 代码 ， 大 概 是 这 样 
的 : 
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS 
includes above 


«link href="css/ionic.app.css" rel="stylesheet"> 
E 


移 除 掉 注 释 部 分 ， 流 行 /ink 标 签 。 接 下 来 ， 移 除 掉 之 前 提 及 的 jonic.css 的 引用 。 因 为 我 们 
不 再 需要 他 了 。 

6， 回 到 终端 /命令 行 ， 运 行 以 下 代码 : gulp sass 这 个 将 会 在 www/css 文 件 夹 内 生成 
ionic.app.css- ionic.app.min.css ° 


这 些 是 你 在 lonic 项 目 里 面 设置 SCSS 所 需 的 全 部 了 。 稍 后 我 们 会 学 习 自 定义 SCSS。 


使 用 lonic CLUE 47% E SCSS 


现在 我 们 要 学 习 的 是 使 用 lonic CLI 设 置 任务 对 项 目 设 置 SCSS。 鉴 于 我 们 已 经 在 example13 里 
面 设置 好 了 SCSS ， 我们 需要 新 建 另 一 个 项 目的 来 学 习 : 

ionic start -a "Example 14" -i app.example.fourteen example14 tabs 

接 下 来 ， 进 入 example14 目 录 ， 运 行 如 下 命令 : ionic setup scss 

这 个 命令 将 会 下 载 依赖 库 ， 移 除 jndex.htm/ 里 面 的 注释 内 容 ， 在 Www/css 文 件 夹 里 面 新 建 
ionic.app.css 和 ijonic.app.min.css 文 件 。 这 个 文件 里 面 有 设置 SCSS 需 要 的 所 有 的 依赖 。 就 问 
你 ， 这 个 局 不 局 ! 


用 到 的 名 词 


e mixin 混合 式 ， 混 合体 


使 用 lonic SCSS 


这 部 分 涵盖 了 如 何 自 定义 lonic SCSS 变 量 和 混合 式 。 
我 们 将 要 编写 的 代码 是 基于 你 已 经 达到 了 使 用 SCSS 的 基本 需求 。 


如 果 对 于 SCSS 你 是 个 新 手 ， 建 议 你 参考 以 下 指引 : http://sass-lang.com/guide 


基础 样本 


早先 的 时 候 ， 我 们 看 过 了 lonic 提 供 的 一 些 基本 的 样 色 样 本 : Positive，Assertive,Calm 等 等 。 
他 们 都 是 lonic 团 队 预 定义 和 设置 好 的 。 如 果 你 想 将 组 件 的 颜色 改 为 positive 类 ， 怎 么 办 呢 ? 下 
面 就 来 学 习 一 下 。 

回 到 example14 文 件 来 ， 打 开 www/index.html 将 ion-nav-bar 指 令 上 的 bar-stable 改 为 bar- 
positive。 接着 ， 打 开 www/templates/tabs.htm/l 文 件 ， 移 除 jon-tabs 指 令 上 的 tabs-color- 
active-positive 类 ， 添 加 tabs-positive ° 


编写 本 书 的 时 候 ，tabs 模 板 对 ijon-nav-bar 使 用 了 stable 样 式 


4.3 4$ HISCSS È € 


直观 显示 ， 运 行 : ionic serve 
R 


localhost:8100/#/tab/dash 


Dashboard 


Recent Updates 


There is a fire in sector 3 


Health 


You ate an apple today! 


Upcoming 


You have 29 meetings on your calendar 
tomorrow. 





我 们 假设 这 是 我 们 最 后 的 app 吧 。 接 下 来 我 们 将 要 为 这 个 布局 定制 主题 ， 这 个 主题 非常 简单 。 
所 有 蓝 色 将 被 蔡 换 成 鸭 绿 色 (teal) 。 

打开 SCSS/ionic.app.scss， 复 制 文件 顶部 的 这 行 注释 : $positive: #387ef5 !default; 
然后 在 注释 块 的 后 面 加 上 他 。 接 下 来 ， 我 们 将 8positive 变 量 的 值 的 设 为 feal : $positive: teal; 
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4.3 使 用 SCSS 变 量 


保存 文件 ， 然 后 后 台 会 运行 Sass 任 务 ， 自 动 生 成 新 的 jonic.app.css 和 ionic.app.min.css 文 件 。 
之 后 页 面 就 自动 刷新 了 。 然后 你 就 可 以 看 到 这 个 鸭 绿 色 主 题 的 页 面 了 : 
C localhost:8100/#/tab/dash 


BERDE [go 


Recent Updates 


There is a fire in sector 3 


Health 


You ate an apple today! 


Upcoming 


You have 29 meetings on your calendar 
tomorrow. 





注意 看 positive 类 的 所 有 引用 是 如 何 更 新 到 teal 的 。 是 不 是 很 属 ? 管理 你 的 移动 app 的 主题 不 再 
像 载 人 航空 科技 那么 复杂 了 | 


理解 lonic SCSS 的 设置 


在 这 个 部 分 ， 我 们 将 学 习 lonic SCSS 是 如 何 建 立 的 。 

当 你 查看 项 目 结构 的 时 候 ， 你 会 发 现 一 个 scss 文 件 夹 ， 里 面 是 一 个 jonic.app.scss 文 件 。 想 要 
对 默认 的 lonic 主 题 进行 自 定义 的 话 ， 你 需要 重 写 此 处 的 变量 ， 且 只 能 是 此 处 的 变量 。 如 果 你 
计划 制定 多 个 主题 ， 我 建议 你 在 scss 文 件 夹 里 面 使 用 theme1.scss，theme2.scss 这 样 的 文 
件 。 

千 万 记得 ， 所 有 的 主题 文件 必须 有 以 下 这 两 行 : 


// The path for our ionicons font files, relative to the built CSS in www/css 
$ionicons-font-path: "../lib/ionic/fonts" !default; 

// Include all of Ionic 

Qimport "www/lib/ionic/scss/ionic"; 
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在 一 个 典型 的 主题 文件 中 ， 第 一 部 分 重 写 SCSS 变 量 。 第 二 部 分 加 载 lonic 核 心 SCSS 文 件 ; 
后 我 们 重 写 生成 的 类 。 
lonic 核 心 SCSS 文 件 引 用 自 以 下 两 个 表达 式 : 


",./lib/ionic/fonts" !default; 
Qimport "www/lib/ionic/scss/ionic"; 


$ionicons-font-path: 


如 果 你 之 前 用 过 SCSS 的 话 ， 你 应 该 会 知道 任何 使 用 /default 指 定 的 变量 在 没有 指定 值 之 前 是 
没有 默认 值 的 ， 就 跟 之 前 范例 一 样 。 

为 了 更 好 的 理解 这 其 中 发 生 了 什么 ， 我 们 先导 航 到 DOORS: -font-path È x 1 345 X- » WH 

x www/lib/ionic/fonts « 这 个 文件 夹 包含 了 4 个 字体 文件 ， 这 4 个 字体 文件 根据 浏览 器 的 兼容 性 

而 决定 使 用 哪 一 个 。 

接着 ， 我 们 导航 至 lonic SCSS 框 架 的 所 在 路 径 。 也 就 是 www/lib/ionic/scss/ionic。 你 可 能 也 发 
现 了 ，sSCSS 文 件 夹 内 没有 叫做 jonic 的 文件 来 。 因 为 他 是 引用 自 www/lib/ionic/scss/ 文 件 夹 内 的 
jonic,scss 的 。 同 时 注意 Scss 文 件 夹 内 的 其 他 SCSS 文 件 的 名 字 都 是 以 下 划 线 开头 的 。 

当 你 打开 jonic.scss 的 文件 的 时 候 ， 你 会 发 现 ， 这 个 文件 所 做 的 只 是 把 当前 文件 夹 内 的 其 他 的 
SCSS 文 件 导 入 进来 : 


@charset "UTF-8"; 

Qimport 
// Tonicons 
"ionicons/ionicons.scss", 
// Nariables 
"mixins", 
"variables", 
// Base 
"reset", 
"scaffolding", 
"type", 
// Components 
"action-sheet", 
"backdrop", 
"bar", 
"tabs", 
"menu", 
"modal", 
"popover", 
"popup", 
"loading", 
"items", 
palsies tau 
"badge", 
"slide-box", 
"refresher", 
"Spinner", 
// Forms 
"form", 
"checkbox", 
"toggle", 
"radio", 
"range", 
"select", 
"progress", 
// Buttons 
"button", 
"button-bar", 


// Util 
"grid", 
"util", 
"platform", 

// Animations 
"animations", 
"transitions"; 


de RREH lonicons > AB 2 A ?Xionicons/ionicons.scss : 4 R1% 28 Y ziimodal2& fF > AB 
么 就 去 改 _modal.scss。 同 理 ， 当 你 想 要 改动 动画 的 时 候 ， 就 去 改动 animations.scss ° 
在 对 lonic 进 行 改 动 之 前 ， 有 两 个 文件 你 一 定 要 理解 清楚 : 


e  variables.scss 
e  mixin.scss 就 像 他 们 的 名 字 说 的 一 样 ， 他 们 分 别 存放 了 可 以 被 重 写 的 变量 和 可 以 被 重用 
的 混合 式 。 如 果 你 打开 _variables.scss 的 时 候 ， 你 会 在 里 面 看 到 所 有 的 颜色 ， 字 体 ， 填 
充 ， 边 距 ， 边 界 等 等 的 变量 。 
例如 ， 你 可 以 在 里 面 搜索 button 文 本 ， 你 将 会 找到 一 整 块 关于 按钮 如 何 设置 的 配置 。 随 便 
摘抄 其 中 一 部 分 来 看 看 : 
$button-positive-bg: $positive !default; 
$button-positive-text: £Zfff !default; 
$button-positive-border: darken($positive, 10%) !default; 


$button-positive-active-bg: darken($positive, 10%) !default; 
$button-positive-active-border: darken($positive, 10%) !default; 


在 这 里 可 以 看 到 positive 类 是 如 何 设置 按钮 的 主题 的 。 只 要 改动 了 gposjtion 变 量 一 下 ， 你 
就 可 以 看 到 按钮 是 外 观 和 感觉 是 如 何 随 之 更 新 的 。 
另外 一 个 范例 是 关于 Grid( 格 子 ) 的 部 分 


// Grids 


$grid-padding-width: 10px !default; 

$grid-responsive-sm-break: 567px !default; // smaller than landscape phone 
$grid-responsive-md-break: 767px !default; // smaller than portrait tablet 
$grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet 


如 果 你 想 对 格子 的 行为 方式 进行 更 改 ， 那 么 就 是 改 这 里 了 。 同时 ， 你 可 以 参考 这 里 的 变 
量 名 对 小 ， 中 ， 大 尺寸 的 设备 的 设置 媒体 查询 断 点 。 

你 可 以 花费 一 些 时 间 来 了 解 这 个 文件 以 确认 你 可 以 重 写 哪些 变量 。 截 至 目前 为 止 ， 还 没 
有 任何 关于 SCSS 变 量 和 他 的 作用 的 官方 文档 。 但 是 variables.scss 文 件 里 面 的 一 些 注释 
倒是 很 有 帮助 。 

接 下 来 ， 打 开 _1mixin.scss 文 件 。 这 个 文件 是 由 Ionic 组 件 使 用 的 混合 式 组 成 的 。 例 如 ， 下 
面 是 button-style 的 混合 式 : 


@mixin button-style($bg-color, $border-color, $active-bg-color,$active-border-colo 
r, $color) { 
border-color: $border-color; 
background-color: $bg-color; 
color: $color; 
// Give desktop users something to play with 
&:hover ( 
color: $color; 
text-decoration: none; 
} 
&.active, 
&.activated { 
border-color: $active-border-color; 
background-color: $active-bg-color; 
box-shadow: inset 0 1px 4px rgba(0,0,0,0.1); 


这 个 混合 式 里 面 有 一 个 背景 色 ， 边 框 色 ， 以 及 一 个 激活 状态 颜色 ， 然 后 生成 了 boraer 
color » background-color， color， .hover，.active 以 及 .activated 规 则 。 
另 一 个 用 的 比较 多 的 混合 式 是 clearfix : 


Qmixin clearfix { 
*zoom: 1; 
&:before, 
&:after ( 
display: table; 
content: ""; 
line-height: 0; 


} 
&:after ( 

clear: both; 
} 


他 所 做 的 是 使 row 清 晰 化 ， 这 个 类 在 很 多 地 方 用 来 管理 布局 。 
再 次 声明 ， 官 方 没有 任何 文档 可 以 用 来 理解 本 文 的 混合 式 。 


用 到 的 名 词 


e button #42 
e animation 动画 


e transition 317€ 


使 用 变量 与 混合 式 


现在 ， 我 们 学 习 过 了 lonic 框 架 的 两 个 核心 部 分 ， 接 下 来 我 们 就 要 学 会 如 何 使 用 他 们 。 
打开 _button.scss。 如 果 你 记得 的 话 ， 早 先 我 们 使 用 按钮 组 件 的 时 候 ， 我 们 添加 的 所 有 按钮 样 
式 或 者 按钮 类 型 都 是 由 button 开 头 的 。 例 如 : 


«button class="button button-positive button-block">Click Me</button> 


button 类 为 按钮 组 件 提供 了 默认 的 样式 。 其 他 的 类 提供 了 修改 的 样式 或 者 类 型 。 多 么 了 不 起 的 
一 个 CSS 解 厅 方 法 ， 对 吧 ? 

回 到 咱们 的 文件 ， 你 将 看 到 button 类 是 如 何 设置 的 。 在 button 类 定义 里 面 ， 我 们 可 以 看 到 很 多 
的 变量 和 混合 式 ， 这 些 我 们 之 前 见 过 一 部 分 。 

button 类 的 一 部 分 摘抄 如 下 : 


&.button-positive { 

@include button-style($button-positive-bg, $button-positive-border, $button-positiv 
e-active-bg, $button-positive-active-border, $buttonpositive-text); 

@include button-clear($button-positive-bg) ; 

@include button-outline($button-positive-bg); 


在 这 里 有 三 个 混合 式 用 来 生成 一 个 button-positive 的 样式 。 这 个 样式 将 会 在 button 和 button- 
positive 应 用 到 元 素 的 时 候 才 会 生效 。 

另 一 个 需要 查阅 的 文件 是 _Util.scss。 所 有 的 工具 类 都 会 生成 在 这 里 ， 例 如 : hide» show’ 
padding 等 等 。 

如 果 你 想 要 对 动画 和 过 渡 做 任何 变更 的 话 ， 你 可 以 去 查看 : animations.scss 和 
_transitions.scss ° 

这 些 文件 名 对 于 查找 组 件 的 SCSS 代 码 帮 助 非常 大 。 


SCSS 工 作 流 


现在 我 们 知道 了 SCSS 在 哪里 设置 ， 如 何 设 置 的 ， 我 们 可 以 使 用 下 面 的 工作 流 在 lonic 项 目 中 使 
用 SCSS。 
步骤 如 下 : 


cR wn >= 


1K 
iT 
在 
在 
在 


型 


如 


然后 你 就 可 以 发 现 你 改 的 是 哪 一 个 组 件 。 导 航 到 正确 的 SCSS 文 件 ， 查 看 对 这 个 类 有 


的 


置 好 SCSS 。 

F scss/ionic.app.scss X 4} » 

导入 lonic SCSS 框 架 之 前 ， 添 加 /更 新 我 们 需要 重 写 的 变量 。 
导入 lonic SCSS 框 架 之 前 ， 添 加 需要 的 字体 。 


导入 lonic SCSS 框 架 之 后 ， 添 加 / 重 写 预定 义 的 类 或 者 创建 一 个 新 的 类 。 然后 ， 一 个 


的 自 定义 的 ionic.app.scss 文 件 就 诞生 了 : 


// Override or add variables 
$positive: teal; 
$custom: £aaa; 
// add custom button variables 
$button-custom-bg: $custom !default; 
$button-custom-text: #eee !default; 
$button-custom-border: darken($custom, 10%) !default; 
$button-custom-active-bg: darken($custom, 10%) !default; 
$button-custom-active-border: darken($custom, 10%) !default; 
// define the ionic fonts path 
$ionicons-font-path: "../lib/ionic/fonts" !default; 
// import Ionic SCSS Framework 
@import "www/lib/ionic/scss/ionic"; 

// build a custom button class that is specific to our app 
.button-custom { 

/* 

Usage : «button class="button button-custom"> 

Custom Styled Button 

«/button» 

as 

@include button-style($button-custom-bg, $button-custom-border, 
$button-custom-active-bg, $button-custom-active-border, $button-customtext) ; 
@include button-clear($button-custom-bg); 

@include button-outline($button-custom-bg); 


果 你 想 完全 的 改变 lonic app 的 外 观 和 感觉 ， 你 可 以 从 重 写 默认 的 颜色 样本 开始 : 


$light: #fff !default; 
$stable: £f8f8f8 !default; 
$positive: #387ef5 !default; 
$calm: #11c1f3 !default; 
$balanced: #33cd5f !default; 
$energized: #ffc900 !default; 
$assertive: #ef473a !default; 
$royal: #886aea !default; 
$dark: #444 !default; 


变量 。 然 后 返回 jonic.app.scss 对 他 们 进行 重 写 。 


4.4 使 用 SCSS 混 合式 
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用 到 的 名 词 


e markup 标记 

e reflect 反射 

e brand 个 人 品牌 ， 牌 子 
e teal SRE 


创建 一 个 样本 


为 了 更 好 地 理解 之 前 的 流程 ， 我 们 将 创建 一 个 自己 的 主题 ， 重 写 变 量 和 类 。 我 们 将 搭建 一 个 
侧 边 菜单 app， 然 后 对 他 默认 的 外 观 和 感觉 进行 更 改 。 
运行 如 下 命令 以 创建 一 个 新 的 侧 边 菜单 app : 


ionic start -a "Example 15" -i app.example.fifteen example15 sidemenu 


然后 通过 ca 命令 进入 到 exa1mple15 文 件 夹 ， 运 行 此 命令 : 


ionic setup scss 


这 个 命令 将 会 为 你 的 项 目下 载 和 设置 SCSS 依 赖 库 。 打 开 ionic.app.scss。 此 处 的 主旨 是 不 更 
改 任何 标记 或 者 添加 任何 新 类 ， 只 是 修改 一 些 对 于 的 变量 来 映射 到 新 的 主题 。 


这 不 是 给 你 的 应 用 定制 主题 的 唯一 途径 。 你 也 可 以 通过 修改 标记 ， 添 加 新 类 以 反射 你 的 
个 人 品牌 。 (例如 button-mybrand 或 者 bar-mybrand) ， 然 后 在 SCSS 里 创建 对 应 的 变量 
和 类 。 

我 们 将 使 用 鸭 屎 蓝 来 给 侧 边 菜单 app 指 定 主题 。 第 一 步 我 们 要 做 的 是 修改 gslable 变 量 : 


$stable: #009688 
如 果 在 添加 上 面 的 样式 之 后 启动 app 的 服务 ， 你 将 看 到 页 头 已 经 变 成 了 鸭 屎 蓝 ， 如 下 : 


4.5 给 一 个 侧 边 菜单 app 定 制 主题 


€ e localhost:8100/#/app/playlists 


Login Reggae 


Search Chill 


Browse Dubstep 


Playlists Indie 


Rap 


Cowbell 





页 头 的 文本 是 黑色 的 。 我 们 把 他 设 为 白色 吧 。 打 开 _barscss， 找 到 以 下 部 分 : 


.title { 
color: #fff; 
} 


这 个 看 起 来 不 是 个 变量 。 所 以 ， 在 这 个 案例 中 ， 我 们 将 重 写 这 个 类 。 在 jonic.app.scss 中 ， 在 
包含 了 lonic CSS 框 架 之 后 ， 我 们 添加 以 下 代码 : 


.bar.bar-stable .titlef 
color:#eee; 


} 


保存 之 后 就 可 以 即 可 看 到 标题 文本 颜色 发 生 了 改变 。 但 是 ， 你 看 到 那个 汉堡 包 菜 单 的 文本 还 
是 黑色 的 。 这 个 我 们 也 想 改 掉 。 当 你 打开 浏览 器 开发 者 工具 检查 这 个 汉堡 包 菜 单 的 时 候 ， 你 
会 发 现 一 个 这 样 的 按钮 : 


«button class="button button-icon button-clear ion-navicon" menutoggle="left"></button 
> 


在 开发 工具 里 面 这 个 元 素 的 样式 里 会 看 到 bar-stable button button-clearix 9s 3X » 42-35 He 
设 为 机 44。 现 在 我 们 要 追踪 这 个 变量 ， 然 后 重 置 他 。 

由 于 类 的 第 一 个 部 分 是 .bar-stable， 所 以 这 个 可 能 是 bar.scss 里 面 的 定义 。 然 后 可 以 

在 _bar.scss 里 面 找到 : 
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.bar-stable { 
.button { 

@include button-style($bar-stable-bg, $bar-stable-border,$bar-stable-active-bg, $b 
ar-stable-active-border, $bar-stabletext); 

@include button-clear($bar-stable-text, $bar-title-font-size); 


注意 观察 混合 式 button-clear。 我 们 可 以 在 _mixins.scss 里 面 看 到 他 的 眼 代码 : 


@mixin button-clear($color, $font-size:"") { 
&.button-clear { 

border-color: transparent; 

background: none; 

box-shadow: none; 

color: $color; 

Qif $font-size !- "" { 

font-size: $font-size; 


} 


&.button-icon { 
border-color: transparent; 
background: none; 


我 们 可 以 看 到 ， 这 个 混合 式 的 第 一 个 参数 名 为 8color。 这 样 我 们 就 知道 我 们 需要 重 写 哪 个 变量 
"hus 
= äl ionic.app.scssX tF » RAIA € 5 $bar-stable-text € = : 


4.5 给 一 个 侧 边 菜单 app 定 制 主题 


$bar-stable-text: #eee; 
保存 文件 ， 然 后 就 可 以 看 到 以 下 效果 : 


€ C | localhost:8100/#/app/playlists 


Login Reggae 


Search Chill 


Browse Dubstep 


Playlists Indie 


Rap 


Cowbell 





接 下 来 ， 我 们 将 更 改 字体 的 颜色 。 我 们 需要 重 写 变量 $base-color。 现在 我 们 要 给 列表 条 目 增 
加 更 多 的 填充 空间 。 我 们 再 次 打开 _jtems.scss， 找 到 这 个 : padding: $item-padding; 
我 们 可 以 将 $item-padding 重 写 为 30px。 

接 下 来 ， 为 每 个 条 目 制作 一 个 淡 绿 色 背 景 。 鉴 于 没有 相关 变量 可 用 ， 我 们 需要 去 重 写 这 个 

类 : 


.item-complex .item-content{ 
background: ZEOF2F1; 
color:400695C; 


112 


4.5 给 一 个 侧 边 菜单 app 定 制 主题 


- 


保存 文件 之 后 ， 可 以 在 浏览 器 里 面 看 到 如 下 效果 : 


e localhost:8100/#/app/playlists 


Left 一 


Playlists 





Dubstep 


Cowbell 


当 点 击 登录 连接 的 时 候 ， 将 会 出 现 一 个 modal 弹 出 框 。 弹 出 框 里 面 的 Login 按 钮 使 用 了 positive 
类 作为 样式 。 使 用 以 下 值 重 写 这 部 分 : 


$button 
$button 
$button 
$button 
$button 


-positive- 
-positive- 
-positive- 
-positive- 
-positive- 


bg: #00BFA5; 

border: #00BFA5; 
active-bg: #80CBC4; 
active-border: #80CBC4; 
text: #eee; 


可 以 在 button-style 里 找到 所 有 button-positive 使 用 的 变量 列表 。 这 里 我 们 处 理 了 putton 类 的 两 


个 状态 。 


Loginmodal 看 起 来 将 会 是 这 样 的 : 
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4.5 给 一 个 侧 边 菜单 app 定 制 主 题 


€ C |ì localhost:8100/#/app/playlists 
Login 
Username 


Password 





一 切 看 起 来 都 是 那么 的 美好 ， 除 了 列表 条 目的 边框 颜色 和 列表 条 目 被 选中 之 后 的 激活 的 背景 
色 。 我 们 现在 就 来 处 理 这 些 。 打 开 _jtems.scss， 找 到 jtem-style 混 合式 ， 这 个 混合 式 接收 的 第 
二 个 参数 是 $item-default-border。 这 个 参考 将 被 用 作 边框 色 。 

我 们 重 写 他 为 : 


$item-default-border: 4009688; 


最 后 是 激活 背景 色 。 在 链接 和 按钮 激活 状态 的 部 分 ， 我 们 会 看 到 一 个 jtem-mixin-style 混 合 


式 。 第 一 个 参数 名 为 $item-default-active-bg， 这 就 是 激活 背景 色 了 。 我 们 将 在 ionic.app.scss 
中 重 写 他 : 


$item-default-active-bg: #B2DFDB; 


完整 的 jonic.app.scss 代 码 如 下 : 
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// override all $stable themed components 
$stable: #009688; 
// override the burger menu color 
$bar-stable-text: £eee; 
// override app base color 
$base-color: #00695C; 
// increase the item padding 
$item-padding : 30px; 
// override buttons 
$button-positive-bg: #00BFA5; 
$button-positive-border: £Z00BFA5; 
$button-positive-active-bg: #80CBC4; 
$button-positive-active-border: #80CBC4; 
$button-positive-text: #eee; 
// border & active bg color 
$item-default-border: #009688; 
$item-default-active-bg: #B2DFDB; 
// The path for our ionicons font files, relative to the built CSS in www/css 
$ionicons-font-path: "../lib/ionic/fonts" !default; 
// Include all of Ionic 
@import "www/lib/ionic/scss/ionic"; 
// Override title color 
.bar.bar-stable .titlef 

color:#eee; 
} 
// Override the item background and color 
.item-complex .item-content{ 

background: ZEOF2F1; 

color: #00695C; 


4.5 给 一 个 侧 边 菜 单 app 定 制 主题 


最 终 效果 图 如 下 : 
€ C localhost:8100/#/app/playlists 


Left — 





Browse Dubstep 


Playlists 





Cowbell 








这 是 一 个 基本 的 使 用 SCSS 给 你 的 lonic app 制 定 主题 的 范例 。 你 可 以 给 他 添加 更 多 的 组 件 ， 然 
后 给 他 们 分 别 制定 主题 作为 练习 。 


我 给 你 展示 了 如 何在 lonic SCSS 设 置 中 找到 响应 的 变量 和 混合 式 。 这 个 知识 点 可 以 用 在 
任何 重 写 变量 和 重用 混合 式 来 定制 主题 的 |onic 目 。 


总 结 
本 章 中 ， 我 们 学 习 了 如 何 定 制 lonic app 主 题 。 我 们 由 设置 SCSS 开 始 ， 然 后 浏览 了 lonic SCSS 
结构 。 之 后 ， 我 们 通过 重 写 变量 以 改变 应 用 的 主题 。 最后， 我 们 建立 了 一 个 app 并 且 改 变 了 
他 的 外 观 。 

接 下 来 的 章节 里 ， 我 们 将 要 浏览 大 量 的 lonic 指 令 和 服务 ， 他 们 将 会 帮助 我 们 轻松 的 创建 混合 
app ° 
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$ AS lonicti 4 5 JR 4 


回顾 一 下 咱们 到 现在 为 止 的 旅程 ， 我 们 从 了 解 AngularJS 作 为 一 个 客户 端 MVW 框 架 的 重要 

性 。 我 们 浏览 了 一 下 Apache Cordova， 以 及 他 是 如 何 应 用 到 整个 混合 应 用 开发 栈 里 面 来 。 稍 
后 ， 我 们 介绍 了 lonic， 解 释 了 他 是 什么 以 及 他 是 如 何 让 我 们 轻松 的 开发 混合 应 用 的 。 在 第 三 
& Ionic CSS 组 件 和 导航 中 ， 我 们 看 到 了 lonic 是 如 何在 你 的 移动 页 面 开发 中 用 作 一 个 唯一 的 
CSS 框 架 的 ， 在 第 四 章 lonc 与 SCSS 中 ， 我 们 学 习 了 如 何 通过 SCSS 的 能 力 去 给 组 件 定制 主 


题 。 


在 本 章 中 ， 我 们 将 要 学 习 |onic 指 令 与 服务 ， 他 们 将 给 我 们 提供 可 重用 的 组 件 以 及 功能 以 帮助 
我 们 更 快 的 开发 应 用 。 


看 完 本 章 ， 你 将 学 会 : 


e |onic 指 令 


e lonic 服 务 


lonic 指 邻 与 服务 


lonic 有 纯 CSS 驱 动 的 组 件 和 需要 借助 JavaScript 的 魔力 达到 圆满 的 组 件 。 由 于 lonic 使 用 
AngularJS 作 为 他 的 JavaScript 框 架 ， 所 有 的 可 重用 的 用 户 界 面 组 件 都 会 被 写成 指令 形式 ， 所 
有 可 重用 的 JavaScript 功 能 片 都 将 会 被 写成 服务 形式 。 

以 下 是 一 些 lonic 指 令 的 示例 : 


e 导航 ion-nav-view 

e 页 头 与 页 脚 ion-header-barte ion-footer-bar 
e 列表 ion-listfeion-item 

e 标签 页 jon-tabs 和 ion-tab 

e 侧 边 菜 单 jon-side-menus 和 ion-side-menu 


以 下 是 一 些 lonic 服 务 的 示例 : 


e 平台 SionicPlatform 

e 滚动 $ionicScrollDelegate 

e 4% 1E SionicModal 

e 导航 条 $SionicNavBarDelegate 
e 历史 $ionicHistory 

e 弹出 框 S$ionicPopup 


在 接 下 来 的 部 分 中 ， 我 们 将 浏览 一 些 lonic 指 令 和 服务 ， 理 解 如 何 使 用 他 们 。 我 们 将 根据 需求 
交替 选择 使 用 lonic 核 心 指 令 和 服务 。 


第 五 章 lonic 指 令 与 服务 


关于 本 章 ， 你 也 可 以 通过 以 下 Github 目 录 来 访问 源 代码 ， 发 起 issue， 与 作者 沟通 : 
https://github.com/learning-ionic/Chapter-5 


118 


用 到 的 名 词 : 


e hook $ f 
e action 动作 


lonic-T- 5 J& 4 


第 一 个 我 们 将 要 使 用 的 服务 是 lonic Platform 服务 (BonicPlatform)。 这 个 服务 提供 设备 级 别 的 

的 钓 子 ， 以 使 你 更 好 的 控制 你 的 应 用 的 行为 。 

我 们 从 最 基本 的 ready 方 法 开始 。 这 个 方法 会 在 设备 准备 好 的 时 候 ， 或 者 设备 已 经 准备 好 的 时 
候 立 即 触发 。 

我 们 将 新 建 一 个 项 目 来 学 习 |onic Platform 服 务 。 新 建 一 个 文件 夹 名 为 chapter5。 在 文件 夹 内 

打开 命令 行 /终端 " 运行 : 


ionic start -a "Example 16" -i app.example.sixteen example16 blank 


app 创 建 好 之 后 ， 打 开 Www/hs/app.js 找 到 以 下 部 分 : 


.run(function($ionicPlatform) { 
$ionicPlatform.ready(function() { 
// Hide the accessory bar by default (remove this to show the accessory bar above 
the keyboard 
// for form inputs) 
if(window.cordova && window.cordova.plugins.Keyboard) { 
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 


H 
if(window.StatusBar) { 
StatusBar.styleDefault(); 


所 有 与 Cordova 有 关 的 代码 都 需要 写 在 $ionicPlatform.ready 方 法 里 面 ， 因 为 这 里 是 app 生 
命 链 中 插件 初始 化 和 预备 使 用 的 点 。 


可 以 看 到 $ionicPlatform 服 务 作 为 依赖 注入 到 了 run 方 法。 强烈 建议 在 其 他 的 AngularJS 组 件 
(如 控制 器 ， 指 令 ， 这 些 都 是 你 打算 与 Cordova 交 互 的 地 方 ) 中 使 用 $jionicPlatform.ready 方 
法 。 

在 之 前 的 [un 方法 中 ， 注 意 我 们 通过 以 下 设置 隐藏 了 键盘 访问 条 : 


cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 


你 可 以 重 写 这 个 设置 为 false。 同 时 ， 注 意 表 达 式 前 面 的 jf 条 件 。 在 使 用 Cordova 的 变量 之 前 进 
行 检查 永远 是 不 会 错 的 。 

$ionicPlatform 指 令 有 一 个 侦查 硬件 返回 按钮 事件 的 Mop ds 。 一 些 (Android) 设备 有 一 个 
硬件 返回 按钮 ， 如 果 你 想 监 听 返 回 按钮 的 按 下 时 间 ， 那 么 你 就 要 对 8iomnicPlatform 服 务 的 
onHardwareBackButton 方 法 进行 关联 了 : 


var hardwareBackButtonHandler = function() { 
console.log('Hardware back button pressed'); 
// do more interesting things here 
} 
$ionicPlatform.onHardwareBackButton(hardwareBackButtonHandl 
er); 


这 个 时 间 需 要 在 $ionicPlatform.ready 方 法 中 注册 ， 最 好 是 在 AngularJS 的 run 方 法 里 面 。 
hardwareBackButtonHandler 回 调 吕 数 将 会 在 每 次 用 户 按 下 设备 的 返回 按钮 进行 调用 。 

这 个 处 理 的 的 一 个 简单 的 逻辑 功能 是 询问 用 户 是 否 凌 的 要 退出 app， 以 确保 他 们 不 会 因为 错误 
操作 而 退出 app。 

虽然 有 时 候 这 很 烦人 人。 因此， 你 可 以 给 用 户 提供 一 个 设置 ， 用 来 指定 当 他 退出 的 时 候 是 否 需 
要 显示 这 个 提示 。 在 此 之 上 ， 你 可 以 延迟 注册 此 事件 或 者 你 可 以 退 订 此 事件 。 

上 述 逻 辑 的 完整 代码 如 下 : 


.run(function($ionicPlatform) { 
$ionicPlatform.ready(function() { 
var alertOnBackPress = localStorage.getItem('alertOnBackPress'); 
var hardwareBackButtonHandler = function() { 
console.log('Hardware back button pressed'); 
// do more interesting things here 
} 
function manageBackPressEvent(alertOnBackPress) ( 
if (alertOnBackPress) { 
$ionicPlat form. onHardwareBackButton(hardwareBackButtonHandler ) ; 
) else { 
$ionicPlatform.offHardwareBackButton(hardwareBackButtonHandler ); 


} 


manageBackPressEvent(alertOnBackPress); 

// later in the code/controller when you let 

// the user update the setting 

function updateSettings(alertOnBackPressModified) { 
localStorage.setlItem('alertOnBackPress', alertOnBackPressModified); 
manageBackPressEvent(alertOnBackPressModified) 


15 
3) 
// when the app boots up 


在 上 面 的 代码 片段 里 ， 我 们 在 /focalStorage 里 面 人 的 值 。 接 下 来 ， 我 们 创 
建 了 一 个 名 为 hardwareBackButtonHandler 的 函数 ， 这 个 函数 将 在 返回 dp d 的 时 候 触 发 。 
最 后 一 个 名 为 manageBackPressEvent() 的 工具 方 uu. 个 布尔 值 ， 这 个 布尔 值 只 是 是 否 注 
册 HardwareBackButton 的 回调 或 者 移 除 注册 。 

有 了 这 些 设 置 ， 当 app 启 动 的 时 候 ， 我 们 使 用 从 /ocalStorage 读 取 的 值 调用 了 
manageBackPressEvent 方 法 。 如 果 在 localStorage 中 这 个 值 存 在 并 且 为 true 的 时 候 ， 我 们 就 
注册 这 个 事件 ; 反之 则 不 注册 。 稍 后 ， 我 们 可 以 给 用 户 提供 一 个 设置 控制 器 以 对 这 个 设置 进 
47 R o SAP RET alertOnBackPresst) KAN > RAA T updateSettings% ik 4% A T 
用 户 是 否 需 要 被 提示 。 updateSettings $% T localStorage €. du 4) 7k E # LAM T 
manageBackPressEventZ iX ° 

这 是 一 个 很 强大 的 范例 ， 展 示 了 当 AngularJS 与 Cordova 组 合 起 来 ， 提 供 API 供 你 轻松 的 管理 
你 的 应 用 。 


这 个 范例 第 一 眼看 起 来 也 许 会 有 点 复杂 ， 但 是 大 部 分 你 需要 消化 的 服务 都 比较 类 似 。 你 
需要 根据 情况 与 优先 级 对 事件 进行 注册 和 移 除 注册 。 所 以 我 觉得 在 这 里 放出 这 个 范例 是 
再 合适 不 过 了 ， 这 个 想法 在 你 完成 本 章 学 习 之 后 会 更 加 确定 


registerBackButtonAction 


$ionicPlatform 提 供 了 另 一 个 名 为 registerBackButtonAction 的 方法 。 当 你 在 按 下 了 返回 按钮 你 
想 要 控制 你 的 应 用 的 行为 的 另 一 个 API © 

默认 按 下 返回 按钮 只 会 执行 一 个 任务 。 例 如 ， 当 你 有 一 个 多 页 面 应 用 ， 然 后 你 从 page1 导 航 到 
了 page2， 这 个 时 候 你 点 击 了 返回 按钮 ， 你 就 会 返回 page1. 在 另 一 个 场景 下 ， 当 用 户 从 page1 
导航 到 page2， 而 page2 加 载 的 时 候 弹 出 了 一 个 对 话 框 ， 此 时 按 下 返回 按钮 ， 只 会 隐藏 弹出 
框 ， 而 不 会 导航 到 page1. 

registerBackButtonAction 方 法 提供 了 一 个 钓 子 去 重 写 这 个 行为 。 

registerBackButtonAction 接 收 以 下 3 个 参数 : 


e callback : 这 个 是 事件 触发 的 时 候 将 会 调用 的 方法 

e priority : 这 个 是 事件 监听 器 的 优先 级 

e actionld (可 选 ) : 这 个 是 分 配给 这 个 动作 的 ID 默认 的 优先 级 有 以 下 几 种 : 

e 预览 视图 = 100 

e 关闭 侧 边 菜单 = 150 

e 清理 modal = 200 

e 关闭 动作 表单 = 300 

e 清理 弹出 框 = 400 

e 清理 加 载 遮盖 层 = 500 因此 ， 当 你 想 要 重 写 返回 按钮 的 默认 行为 的 时 候 ， 你 需要 这 样子 
去 做 : 


var cancelRegisterBackButtonAction = 
$ionicPlatform.registerBackButtonAction(backButtonCustomHandler, 201); 


这 个 监听 器 将 重 写 (抢夺 优先 权 ) 所 有 优先 级 低 于 201 的 默认 的 监听 器 ， 也 就 是 清理 
modal， 关 闭 侧 边 菜 单 和 预览 视图 ， 但 是 他 不 会 重 写 优先 级 高 于 他 的 其 他 的 监听 器 。 
$ionicPlatform.registerBackButtonAction 执 行 的 时 候 ， 返 回 一 个 函数 。 我 们 已 经 将 这 个 郊 
数 指派 给 了 cancelRegisterBackButtonAction 变 量 。 执 

行 cancelRegisterBackButtonAction 移 除 registerBackButtonAction 监 听 器 的 注册 。 


on 方法 


除了 上 面 方法 之 外 ，$ionicPlatform 有 一 个 通用 的 on 方法 可 以 用 来 监听 所 有 的 Cordova 事 
f : https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html 


a 


你 可 以 为 应 用 的 pause ( 41%) , application resume ( € 1) ,volumedownbutton (音量 
加 ) ,volumupbutton (音量 减 ) 等 等 设置 钩子， 然后 根据 情况 执行 自 定 义 的 方法 。 
可 以 这 样 在 $ionicPlatform.ready 方 法 内 设置 这 些 监听 器 : 


var cancelPause = $ionicPlatform.on('pause', function() { 
console.log('App is sent to background'); 
// do stuff to save power 

3); 

var cancelResume = $ionicPlatform.on('resume', function() { 
console.log('App is retrieved from background'); 
// re-init the app 

H); 

// Supported only in BlackBerry 10 & Android 

var cancelVolumeUpButton = $ionicPlatform.on('volumeupbutton',function() { 
console.log('Volume up button pressed'); 
// moving a slider up 

3); 

var cancelVolumeDownButton = $ionicPlatform.on( 'volumedownbutton',function() { 
console.log('Volume down button pressed'); 
// moving a slider down 


3): 


On 方法 返回 一 个 当 移 除 事件 监听 需要 的 函数 。 
现在 你 应 该 知道 在 处 理 移动 OS 事件 和 硬件 按钮 的 时 候 如 何 更 好 的 控制 你 的 app。 


jx 5 y 


使 用 jion-header-bar 和 ion-footer-bar 指 令 ， 可 以 给 你 的 app 添 加 一 个 固定 的 页 头 和 页 脚 。 范例 
结构 如 下 : 


«ion-header-bar align-title-"center" class="bar-assertive"> 
«div class="buttons"> 
«button class="button button-royal" ngclick="doSomething()">Left Button</butto 
n> 
</div> 
«hi class="title">Fixed Header</h1i> 
<div class="buttons"> 
<button class="button button-royal">Right Button</button> 
</div> 
</ion-header -bar> 
<ion-content> 
<div class="padding"> 
<h3>Content</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 
elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum. </p> 
</div> 
</ion-content> 
«ion-footer-bar align-title-"left" class="bar-energized"> 
«div class="buttons"> 
«button class="button button-dark">Left Button</button> 
</div> 
«hi class="title">Fixed Footer</h1i> 
<div class="buttons" ng-click="doSomething()"> 
<button class="button button-dark">Right Button</button> 
</div> 
</ion- footer -bar> 


结果 如 下 : 


c localhost:8100 


Left Button Fixed Header Right Button 


Content 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in 


reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum. 


Right Button 





内 容 Content 


接 下 来 将 要 学 习 的 是 内 容 相 关 的 指令 。 从 jon-content 指 令 开 始 。 


ion-content 


ion-content 用 作 一 个 内 容 显 示 区 域 。 这 条 指令 有 很 多 选择 可 以 供 你 更 好 的 控制 内 容 显 示 区 
域 。 你 可 以 对 /on-content 使 用 lonic 自 定义 的 滚动 视图 或 者 使 用 浏览 器 默认 的 履 盖 层 滚 动 。 
这 本 书写 作 的 时 候 ，jon-content 指 令 包 含 的 所 有 属性 如 下 : 
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«ion-content 
delegate-handle="" 
direction="" 
locking="" 
padding="" 
scroll="" 
overflow-scroll="" 
scrollbar -x="" 
scrollbar -y="" 
start-x="" 
start-y="" 
on-scroll="" 
on-scroll-complete="" 
has-bouncing="" 
scroll-event-interval=""> 
<hi>Heading!</h1i> 

</ion-content> 


ion-content 关 键 的 几 个 属性 解释 如 下 : 


e scroll: 决定 是 否 使 用 滚动 ， 默 认 : true 

e overflow-scroll : 使 用 浏览 器 的 覆盖 层 滚 动 

e on-scroll : 当 显 示 内 容 滚动 的 时 候 调 用 的 函数 /表达 式 

e on-scroll-complete : 当 显示 内 容 滚动 完成 之 后 执行 的 函数 /表达 式 

e scroll-event-interval : 在 调用 on-scroll 之 前 的 定时 器 ， 上 默认 : 10ms 

e scrollbar-x : 展示 水 平 滚动 条 ， 黑 认 : true 

e scrollbar-y : 展示 垂直 滚动 条 ， 默 认 : true 

e locking : 49 7& 3j > RU : true 

e direction: 只 是 如 何 滚动 ， 可 用 :x，y (RU) * xy 

e has-bouncing : 允许 你 滚动 超出 显示 内 容 的 边界 ， 默 认 : iOS 上 true，Android 上 false 


ion-scroll 


也 可 以 使 用 ion-scrol| 指 令 来 控制 显示 内 容 的 滚动 。 这 个 指令 用 于 替换 jion-content 指 令 的 。 
使 用 方式 也 是 非常 简单 的 : 


«ion-view ng-controller="MyAppCtrl" cache-view="false"> 
«ion-scroll zooming="true" direction="xy" style="width: 300px; height: 300px"> 
<div style="width: 1000px; height: 1000px; backgroundcolor:teal"></div> 
</ion-scroll> 


</ion-view> 


注意 一 点 : 需要 将 Scroll 盒 的 高 度 设置 为 内 部 需要 滚动 的 内 容 的 高 度 。 如果 想 要 使 滚动 区 
域 居 中 ， 可 以 使 用 :ion-content 


后 面 将 会 谈 到 jon-view 的 ， 不 要 着 急 。 


ion-refresher 


另 一 个 能 够 方便 管理 显示 内 容 的 指令 是 ion-refresher。 这 个 是 添加 到 滚动 视图 (jon-content 或 
#ion-scroll) 中 用 作 下 拉 更 新 的 指令 。 
新 建 一 个 空白 模板 项 目 来 测试 : 


ionic start -a "Example 17" -i app.example.seventeen example17 blank 


使 用 cd 命令 ， 进 入 到 example17 文 件 夹 ， 运 行 如 下 命令 : 


ionic serve 


这 个 范例 中 ， 我 们 将 实现 一 个 下 拉 更 新 的 功能 。 我 们 将 创建 一 个 工厂 然后 伪造 HTTP 请 求 并 返 
回 一 个 对 象 数 组 。 数 组 对 象 是 一 个 伪 哈 希 ， 有 两 个 用 于 显示 的 属性 。 

这 个 工厂 将 会 从 AppC 妇 调用 ， 因 为 AppC 妇 是 视图 的 控制 器 。 这 个 控制 Rm 现 一 
个 qoRefresh 方 法 ， 这 个 方法 在 用 户 进行 下 拉 更 新 操作 的 R AR 。 这 个 方法 将 直接 跟 工 厂 对 
话 ， 拿 到 随机 数据 ， 然 后 这 些 数据 将 会 被 添加 到 当前 的 显示 列表 。 

我 们 将 在 www/js/app.js 的 config 方 法 后 面 定 义 如 下 数据 工厂 : 


.factory('DataFactory', function($timeout, $q) { 
var API = { 
getData: function(count) { 
// Spoof a network call using promises 
var deferred - $q.defer(); 
var data - [], 
So ty 
count = count || 3; 
for (var i = 0; i < count; i++) { 
zd) at 
// http://stackoverflow.com/a/8084248/1015046 
random: (Math.random() + 1).toString(36).substring(7), 
time: (new Date()).toString().substring(15, 24) 
}; 
data.push(_o); 
HN 
$timeout(function() { 
// success response! 
deferred.resolve(data); 
}, 1000); 
return deferred.promise; 


3 
return API; 


}) 


以 上 范例 可 简单 使 用 settiemout 替 代 promise 就 可 以 了 。 但 是 ， 由 于 AngularJS 严 重 依 赖 
promise 驱 动 ， 所 以 我 们 这 个 范例 使 用 的 是 promise， 我 个 人 也 认为 应 当 这 么 做 。 


在 上 面 的 工厂 中 ， 我 们 用 到 了 AngularJS 的 gg 服务 ， 这 个 服务 帮助 我 们 以 异步 的 方式 返回 结 
果 ， 类 似 HTTP 请 求 。 我 们 创建 的 返回 结果 对 象 包含 一 个 随机 字母 的 字符 串 作 为 第 一 个 属性 ， 
以 日 期 子 串 作为 第 二 属性 。 这 个 仅 做 显示 用 途 ， 没 别 的 意义 。 

在 www/js/app.js 中 ， 我 们 的 控制 器 代码 如 下 : 


.controller('AppCtrl', function($scope, DataFactory) { 
$scope.items - []; 
$scope.doRefresh = function() { 
DataFactory.getData(3) 
.then(function(data) { 
// extend the $scope.items array with the response 
// array from getData(); 
// http://stackoverflow.com/a/1374131/1015046 
Array.prototype.push.apply($scope.items, data); 
}).finally(function() { 
// Stop the ion-refresher from spinning 
$scope.$broadcast('scroll.refreshComplete' ); 
}); 
} 
// load data on page load 


DataFactory.getData(3).then(function(data) { 
$scope.items = data; 
395 
3) 


在 上 面 的 控制 器 代码 中 ， 我 们 给 器 注入 了 DataFactory 作 为 依赖 。 我 们 可 以 在 控制 器 初始 
化 之 后 Rin) > 会 返回 3 条 记录 ， 这 3 条 记录 我 们 将 指派 给 

接 下 来 ， 我 们 定义 了 用 户 下 拉 更 新 的 时 候 需 要 的 doRefresh 方 法 。 这 个 方法 也 使 用 了 
DataFactory 的 getData 方 法 并 返回 了 他 的 返回 值 。 然 后 我 们 将 getData 方 法 的 返回 值 数组 附加 
到 Scope 变 量 上 。 

注意 ， 我 们 是 把 数据 附加 到 已 有 的 数组 的 后 面 的 。 如 果 在 用 户 需 要 在 顶部 查看 最 新 数据 的 时 
候 ， 那 么 数据 将 要 前 置 到 已 有 数组 。 HUG > KAS 4& T scroll.refreshComplete  tF > 3x E 34 
会 隐藏 刷新 按钮 /微调 (spinner) 。 

现在 可 以 更 新 Www/index.html 的 body 部 分 了 : 


«body ng-app="starter" ng-controllerz"AppCtrl"» 
«ion-header-bar class="bar-stable"> 
«hi class="title">Pull To Refresh</h1> 
</ion-header -bar> 
<ion-content> 
«ion-refresher pulling-text="Pull to refresh..." onrefresh="doRefresh()"> 
</ion-refresher> 
<ion-list> 
<ion-item collection-repeat="item in items"> 
<h2>Random Key : {{item.random}}</h2> 
<p>Time : {{item.time}}</p> 
</ion-item> 
</ion-list> 
</ion-content> 
</body> 


5.1 lonic 指 令 与 服务 1 


注意 看 ， 我 们 将 jon-refresher 作 为 jon-content 的 直接 子 元 素 添 加 进来 了 。 然 后 我 们 使 
用 collection-repeat 替 换 了 ng-repeat ° 


collection-repeat 比 ng-repeat 在 显示 超大 列表 的 时 候 效率 更 高 。 更 多 信息 关于 colection- 
repeat 请 参考 : http://ionicframework.com/docs/api/directive/collectionRepeat/ 


保存 所 有 文件 ， 然 后 你 可 以 在 浏览 器 中 看 到 如 下 画面 : 


e localhost:8 100 


Pull To Refresh 


Random Key : IBzrOfnu3di 
Time : 16:32:48 


Random Key : O6lafnipb9 
Time : 16:32:48 


Random Key : vhvntnpnwmi 
Time : 16:32:48 





使 用 鼠标 下 拉 页 面 的 时 候 ， 将 会 看 到 这 样子 的 画面 : 
e localhost:8100 


Pull To Refresh 


Random Key : IBzrOfnu3di 
Time ; 16:32:48 


Random Key : O6lafnipb9 
Time ; 16:32:48 


Random Key : vhvntnpnwmi 
Time : 16:32:48 
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一 旦 promise 完 成 之 后 ， 数 据 将 会 立即 返回 控制 器 然后 附加 到 条 目 数组 里 。 所 以 这 些 流程 完成 
之 后 ， 将 会 触发 scroll.refreshComplete 事 件 ， 隐 藏 加 载 图 标 /spinner。 更 新 后 的 页 面 如 下 : 


C localhost:8100 


Pull To Refresh 


Random Key : l8zrOfnu3di 
Time : 16:32:48 


Random Key : O6lafnipb9 


Time : 16:32:48 


Random Key : vhvntnpnwmi 


Time : 16:32:48 


Random Key : w8nqyw4s4i 
Time : 16:33:06 


Random Key : xf6nxh41jor 
Time : 16:33:06 


Random Key : kxI9578ehfr 
Time : 16:33:06 





你 也 可 以 通过 ijon-refresher 的 pulling-text, pulling-iocn, spinner 属 性 设置 下 拉 刷 新 的 文 
本 ， 图 标 和 spinner。 其 他 可 用 选择 ， 请 参考 : 
http://ionicframework.com/docs/api/directive/ionRefresher/ 


ion-infinite-scroll 


lonic 提 供 了 另 一 个 方便 的 名 为 jon-infinite-scrol| 的 指令 ， 和 ion-refresher 类 似 。 当 用 户 达 到 列 
表 的 末尾 的 时 候 ， 这 个 指令 将 会 调用 和 上 面 例子 里 面 doRefresh 方 法 类 似 的 方法 来 更 新 列表 。 
jon-refresher 与 ion-infinite-scrol| 的 不 同 点 是 当 用 户 明确 的 需要 加 载 一 个 列表 的 时 候 使 用 jon- 
refresher， 而 ion-infinite-scrol| 则 是 当 用 户 滚动 的 时 候 自动 更 新 列表 。 

想 要 在 之 前 的 范例 中 使 用 ion-infinite-scroll， 只 需要 将 body 部 分 更 新 为 如 下 即 可 : 


«body ng-app="starter" ng-controllerz"AppCtrl"» 
«ion-header-bar class="bar-stable"> 
«hi class="title">Pull To Refresh</h1> 
</ion-header -bar> 


<ion-content> 
<ion-refresher pulling-text-"Pull to refresh..." onrefresh="doRefresh()"> 


</ion-refresher> 
<ion-list> 
<ion-item collection-repeat="item in items"> 
<h2>Random Key : {{item.random}}</h2> 
<p>Time : {{item.time}}</p> 
</ion-item> 
</ion-list> 


«ion-infinite-scroll on-infinite-"loadMore()" distance="1%"> 


«/ion-infinite-scroll» 
</ion-content> 
</body> 


注意 jon-infinite-scroll| 是 加 载 列表 后 面 的 ， 他 有 一 个 属性 名 为 on-infinite。 当 距离 是 1% 的 时 

候 ， 将 会 评估 这 个 属性 。 同 时 我 们 也 把 jon-refresher 留 下 来 了 。 因 为 这 是 一 个 例子 而 已 ， 我 
想 要 给 你 展示 如 何在 一 个 例子 中 同时 使 用 jon-refresher 和 和 ion-infinite-scroll ° 

在 一 个 实时 新 闻 人 馈送 app 中 ， 你 也 许 会 这 么 做 。 当 用 户 下 拉 更 新 的 时 候 ， 你 会 要 给 用 户 展示 最 
新 的 新 闻 ， 当 用 户 滚动 到 下 面 的 时 候 ， 你 需要 给 用 户 展 示 昌 新 闻 。 

更 新 了 loadMore 的 新 版 本 的 AppCtrl 如 下 : 


.controller('AppCtrl', function($scope, DataFactory) { 
$scope.items - []; 
$scope.doRefresh = function() { 
DataFactory.getData(3) 
.then(function(data) { 
// extend the $scope.items array with the response 
// array from getData(); 
// http://stackoverflow.com/a/1374131/1015046 
Array.prototype.push.apply($scope.items, data); 
}).finally(function() { 
// Stop the ion-refresher from spinning 
$scope.$broadcast('scroll.refreshComplete' ); 
3; 
} 


$scope.loadMore = function() { 
DataFactory.getData(3) 
.then(function(data) { 
// extend the $scope.items array with the response 
// array from getData(); 
// http://stackoverflow.com/a/1374131/1015046 
Array.prototype.push.apply($scope.items, data); 
}).finally(function() { 
// Stop the ion-refresher from spinning 
$scope.$broadcast('scroll.infiniteScrollComplete' ); 
3; 


} 
// load data on page load 


DataFactory.getData(3).then(function(data) { 
$scope.items = data; 
}); 

}) 


我 们 给 scope 变 量 添加 了 /oaaMore 方 法 。 这 个 基本 和 aoRefresh 方 法 差不多 ， 除 了 我 们 在 这 里 
F 4&8) 3 # X scroll.infiniteScrollComplete 。 

保存 文件 ， 回 到 浏览 器 ， 你 将 看 到 当 一 部 分 数据 隐藏 的 时 候 jon-infinite-scrol/ 会 开始 调用 方法 
TX 

当 你 下 拉 刷 新 的 时 候 ， 列 表 会 再 次 更 新 。 但 是 请 记 住 ， 我 们 并 不 是 前 置 列表 ， 所 以 数据 还 是 
添加 到 末尾 的 。 


ionicScrollDelegate 


lonic 提 供 了 一 个 控制 滚动 视图 的 服务 。 名 为 $ionicScrollDelegate。$ionicScrollDelegate 服 务 
提供 了 一 系列 的 API， 用 于 滚动 ， 缩 放 以 及 取得 当前 滚动 位 置 等 等 。 

在 之 前 的 范例 中 ， 我 们 可 以 在 页 头 里 面 添 加 一 个 按钮 名 为 Scroj To Top。 在 用 户 下 拉 过 列表 之 
后 ， 当 用 户 点 击 这 个 ， 我 们 将 通过 $jonicScrollDelegate 将 他 滚动 到 顶部 。 

更 新 后 的 jon-header-bar 是 这 样 的 : 


5.1 lonic 4 5 JR 4-1 


«ion-header-bar class="bar-stable"> 

«hi class="title">Pull To Refresh</h1i> 

«button class="button" ng-click="scrollToTop()">Scroll to Top</button> 
</ion-header -bar> 


然后 在 控制 器 中 ， 我 们 在 注入 了 $ionicScrolliDelegate 之 后 ， 添 加 了 scrollToTop 方 法 定义 : 


$scope.scrollToTop = function() { 
$ionicScrollDelegate.scrollTop(); 


现在 ， 无 论 用 户 把 列表 拉 到 多 下 面 ， 用 户 都 可 以 通过 按 下 这 个 按钮 返回 列表 顶部 ， 如 下 : 
C localhost:8100 


Pull To Refresh Scroll to Top 


Random Key : mo53rztzkt9 


Time : 17:26:50 


Random Key : xSworox0f6r 
Time : 17:26:50 


Random Key ; 3e69dv1v2t9 
Time : 17:26:50 


Random Key : dtpgb9 


Time : 17:26:51 


Random Key : hyvxz1qyafr 


Time : 17:26:51 


Random Key : q7gv3elv7vi 


Time : 17:26:51 


Random Key : eObtla3jtt9 
Time : 17:26:52 


Random Key : 9rridughOk9 
Time : 17:26:52 





$ $15 & X T SionicScrollDelegatei 4 : 
http://ionicframework.com/docs/api/service/$ionicScrollDelegate 
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导航 


接 下 来 出 场 的 是 导航 相关 的 组 件 。 导 航 组 件 有 许 许多 都 的 指令 和 许 许 多 多 的 服务 。 

第 一 个 出 场 的 指令 是 jon-nav-view » 

在 第 三 章 Jonic CSS 组 件 和 导航 中 ， 我 们 已 经 学 习 过 lonic 状 态 路 由 器 并 了 解 了 他 是 如 何 工作 
的 。 我 们 也 看 过 了 lonic 中 的 jion-nav-view 是 如 何 向 AngularJS 里 面 的 U-view 一 样 工 作 的 。 

当 app 启 动 的 时 候 ，$stateProvider 将 会 查找 默认 的 状态 ， 然 后 尝试 加 载 ion-nav-vieW 里 面 对 应 
的 模板 。 


ion-view 


接 下 来 出 场 的 是 jion-view 指 令 。ion-viewW 是 ion-nav-view 的 子 类 。 这 个 指令 用 来 作为 添加 页 头 
信息 和 其 他 内 容 的 容器 。 当 应 用 状态 改变 的 时 候 ， 会 在 父 容器 jon-nav-VieW 内 展示 对 应 的 视 

图 。 

在 lonic 中 ， 为 改善 执行 效率 ， 视 图 都 会 被 缓存 起 来 。 当 视图 离开 ion-nav-view 之 后 ， 他 的 子 元 
素 都 将 从 DOM 中 移 除 ， 他 的 scope 也 将 和 8watch 循 环 断 开 连 接 。 当 之 前 缓存 的 视图 进入 jon- 
nav-view 的 时 候 ， 他 的 sScope 将 会 重新 连接 ， 已 有 的 元 素 都 将 重新 激活 。 

新 建 一 个 空白 模板 项 目 来 学 习 : 


ionic start -a "Example 18" -i app.example.eighteen example18 blank 


通过 cd 目录 ， 进 入 到 example18 文 件 夹 ， 然 后 运行 : 


ionic serve 


接 下 来 ， 我 们 将 给 这 个 app 添 加 一 个 路 由 器 ， 这 个 路 由 器 有 2 个 状态 。 打 开 www/js/app.js 在 run 
方法 后 添加 以 下 方法 : 


.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('page1', { 
url: '/pagei', 
templateUrl: 'pagei.html' 
}) 
.state('page2', { 
url: '/page2', 
templateUrl: 'page2.html' 
3); 
$urlRouterProvider.otherwise('/page1'); 


35) 


我 们 分 别 给 page1 和 page2 创 建 了 两 个 状态 。 接 下 来 ， 修 改 www/index.html 的 body 部 分 : 


<body ng-app="starter"> 
<ion-nav-bar></ion-nav-bar> 
<ion-nav-view></ion-nav-view> 
<!-- Templates --> 
«script type="text/ng-template" id="page1.html"> 
«ion-view view-title="Title"> 
<ion-content> 
<h3>Page 1</h3> 
<button class="button button-dark" ui-sref="page2">Navigate to Page 2</but 
ton» 
«/ion-content» 
</ion-view> 
</script> 
«script type="text/ng-template" id="page2.html"> 
<ion-view view-title="Title"> 
<ion-content> 
<h3>Page 2</h3> 
<button class="button button-dark" ui-sref="pagei"> Navigate to Page 1</bu 
tton> 
</ion-content> 
</ion-view> 
</script> 
</body> 


我 们 创建 了 一 个 供 jon-view 内 容 注入 的 jon-nav-view 指 令 。 我 们 的 视图 
建 的 。 这 样 一 来 ，AngularJS 就 不 用 发 起 AJAX 请 求 来 加 载 模板 来 。 
维护 者 来 说 都 是 很 不 友好 的 。 

ion-view 指 令 有 一 个 子 指令 ion-content。 每 次 导入 新 模板 的 时 候 ， 他 都 会 进行 缓存 。 你 可 以 通 
过 更 改 jon-view 的 属性 来 控制 视图 状态 的 外 观 ， 同 理 也 可 以 控制 缓存 行为 。 

例如 ， 在 以 上 代码 中 ， 我 们 给 jon-view 标 签 添加 一 个 view-title 镶 性 。 这 个 值 是 用 作 页 面 标 签 ， 
同时 在 没有 ion-nav-bar 的 情况 下 ， 也 可 以 用 作 导 航 条 标题 。 

如 果 想 要 禁用 模板 缓存 ， 在 ion-view 上 面 设 置 cache-view 属 性 为 false 就 可 以 了 。 同 时 也 可 以 设 
置 hide-nav-bar 来 控制 是 否 显 示 nav-bar。 

加 上 上 面 这 些 属性 之 后 ，jon-view 看 起 来 差不多 是 这 样子 的 : 


是 通过 script 标 签 语法 创 
但 是 这 人 么 


做 对 于 开发 者 和 


<ion-view view-title="Title" cache-view="false" hide-navbar="false" hide-back-button=" 
true" can-swipe-back="false"> 


为 避免 在 导航 条 里 面 显示 返回 按钮 ， 我 们 也 可 以 控制 返回 按钮 的 显示 。 在 后 续 学 习 jon-nav- 
bar 的 时 候 会 学 到 这 一 点 。 
运行 以 下 命令 ， 可 以 验证 目前 所 有 对 example18 的 更 改 : 


ionic serve 


lonic 视 图 事件 


lonic 视 图 有 很 多 生命 周期 方法 ， 你 可 以 在 这 些 方法 里 添加 你 的 自 定义 行为 。 我 们 将 给 
example18 添 加 一 个 run 方 法 ， 代 码 如 下 。 在 run 方 法 中 ， 我 们 给 $ionicview 添 加 了 事件 监听 
器 。 打 开 Www/js/app.js 添 加 以 下 代码 : 


.run(function($ionicPlatform, $rootScope) { 


}) 


// View Life Cycle 

$rootScope.$on('$ionicView.loaded', function(event, view) { 
console.log('Loaded..', view.stateName); 

1 

$rootScope.$on('$ionicView.beforeEnter', function(event, view) 


t 


console.log('Before Enter..', view.stateName); 


1); 
$rootScope.$on('$ionicView.afterEnter', function(event, view) 
t 
console.log('After Enter..', view.stateName); 
15 


$rootScope.$on('$ionicView.enter', function(event, view) { 
console.log('Entered..', view.stateName); 

35 

$rootScope.$on('$ionicView.leave', function(event, view) { 
console.log('Left..', view.stateName); 

1; 

$rootScope.$on('$ionicView.beforeLeave', function(event, view) 


t 


console.log('Before Leave..', view.stateName); 


1; 
$rootScope.$on('$ionicView.afterLeave', function(event, view) 
t 
console.log('After Leave..', view.stateName); 
1 


$rootScope.$on('$ionicView.unloaded', function(event, view) { 
console.log('View unloaded..', view.stateName); 


3); 


你 可 以 给 一 个 单独 的 模块 添加 多 个 run 方 法 。 


这 样 ， 在 我 们 从 page1 导 航 到 page2 的 时 候 ， 你 将 会 看 到 下 面 这 样 的 结果 : 


localhost:8100/#/page2 


Title Q [] Elements Network Sources Timeline Profiles 


© Ww «top frame» v Preserve log 


Loaded.. pagel 
Before Enter.. pagel 
After Enter.. pagel 
Entered.. pagel 
Loaded.. page2 
Before Enter.. page2 
Before Leave.. pagel 
After Enter.. page2 
Entered.. page2 
After Leave.. pagel 
Left.. pagel 


Navigate to Page 1 
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$ionicView.loaded4e $ionicView.unloaded A & 4€ 4È h) 3$ 49 $rootScope €. + 3k > $scope X. 
面 不 会 有 任何 效果 。 其 他 的 方法 可 以 。 


ion-nav-bar 


当 我 们 制作 多 页 面 应 用 的 时 候 ,ion-nav-bar 将 会 是 你 的 好 基 友 。 这 个 指令 负责 在 你 的 状态 改变 
的 时 候 更 新 页 面 标题 栏 。 在 example18 中 ， 我 们 添加 了 一 个 简化 版 的 jion-nav-bar。 
现在 ， 我 们 来 看 一 下 稍微 强化 版 的 。 在 www/index.html 中 ， 使 用 以 下 代码 蔡 换 ion-nav-bar : 


<ion-nav-bar class="bar-assertive"> 
«ion-nav-buttons side="left"> 
«button class="button button-energized" ng-click="leftyClick()"> 
Left Button 
</button> 
</ion-nav-buttons> 
«ion-nav-back-button class="button-clear"> 
<i class="ion-arrow-left-c"></i> Back 
</ion-nav-back-button> 
<ion-nav-buttons side="right"> 
«button class="button button-energized" ng-click="rightyClick()"> 
Right Button 
</button> 
</ion-nav-buttons> 
</ion-nav-bar> 


在 这 段 代 码 中 ， 你 可 以 看 到 ion-nav-bar 使 用 ion-nav-buttons 或 者 ion-nav-back-button 作 为 子 指 
令 。 


ion-nav-buttons 用 于 将 按钮 展示 在 页 头 导 航 条 。 更 新 后 的 页 面 效 果 如 下 : 


localhost:8100/#/page 


Navigate to Page 2 





你 可 以 定义 leftyClick() 和 rightyClick() 功 能 以 供 按钮 点 击 的 时 候 调用 。 也 可 以 添加 一 个 Header 
Controller 并 定义 这 些 方法 ， 然 后 将 Header Controller 添 加 给 jon-nav-bar; 或 者 也 可 以 在 root 
scOpe 里 面 定 义 /eftyClick() 和 rightyClick()， 虽 然 这 个 做 法 不 怎么 理想 化 。 在 实际 环境 中 ， 根 据 
情况 右上 角 一 般 显示 的 是 Logout 按 钮 ，Option 按 钮 或 者 Add 按 钮 。 

ion-nav-bar 也 是 ion-nav-back-button 的 宿主 。 这 个 指令 负责 在 页 面 之 间 导 航 的 时 候 自 动 显示 返 
回 按钮 : 


C localhost:8100/#/page2 


Navigate to Page 1 





看 到 了 吗 ， 返 回 按 钮 自动 出 现 了 ， 把 左边 的 按钮 从 原先 的 位 置 挤 走 了 。 
ion-nav-bar 指 令 只 有 在 模板 内 容 被 包装 在 ion-view 标 签 里 的 时 候 才 会 正常 工作 。 


那么 ， 这 样 我 们 就 又 回 到 了 jon-view 标 签 的 属性 来 。 你 可 以 设置 jion-view 的 hide-nav-bar 属 性 
为 false : 这 样 将 会 为 当前 页 面 显示 导航 。 或 者 你 可 以 设置 back-button 为 false 以 隐藏 页 面 上 的 
返回 按钮 。 

修改 后 的 page2 的 jon-view 如 下 : 


«ion-view view-title-"Page 2" hide-nav-bar="false" hide-backbutton="true"> 


此 时 ， 当 你 从 page1 寻 航 只 page2 的 时 候 ， 你 会 发 现 返回 按钮 不 见 了 : 


Ç localhost:8100/#/page2 


Page 2 


Navigate to Page 1 





ion-nav-buttons 


lonic 对 页 头 里 面 的 按钮 提供 了 细 粒 度 的 控制 。 如 果 你 在 jion-view 中 声明 了 jon-nav-buttons， 在 
模板 中 ， 他 们 将 会 覆盖 1jomn-nav-bar 指 令 里 面 的 。 
我 们 将 Dage2 模 板 更 新 如 下 : 


«script type-"text/ng-template" id-"page2.html"- 
«ion-view view-title-"Page 2" hide-nav-bar="false" hide-back-button="true"> 

«ion-nav-buttons side="left"> 
«button class="button button-calm" ng-click-"settingsClick()"» 
Settings 
«/button» 

</ion-nav-buttons> 

<ion-nav-buttons side="right"> 
<button class="button button-calm" ng-click="optionsClick()"> 
Options 
</button> 

</ion-nav-buttons> 

<ion-content> 
<h3>Page 2</h3> 
«button class="button button-dark" ui-sref="pagei"> 
Navigate to Page 1 
</button> 

</ion-content> 

</ion-view> 
</script> 


i64 ^ KAA x 5 ion-nav-bar. a 8 jion-nav-buttons3t fT € 7X : 


«ion-nav-bar class="bar-assertive"> 
«ion-nav-buttons side="left"> 
«button class="button button-energized" ng-click="leftyClick()"> 
Left Button 
</button> 
</ion-nav-buttons> 
«ion-nav-back-button class="button-clear"> 
<i class="ion-arrow-left-c"></i> Back 
</ion-nav-back-button> 
<ion-nav-buttons side="right"> 
«button class="button button-energized" ng-click-"rightyClick()"» 
Right Button 
«/button» 
«/ion-nav-buttons» 
«/ion-nav-bar» 


保存 文件 回 到 浏览 器 ，page1 效 果 如 下 : 


c localhost:8 100/#/page 


Navigate to Page 2 





page2 在 模板 内 显示 了 jon-nav-button : 


€ c localhost:8 100/#/page2 


Navigate to Page 1 





$ionicNavBarDelegate 


可 以 在 控制 器 内 控制 jion-nav-bar，$ionicNavBarDelegate 服 务 也 可 以 。 

为 了 更 好 的 理解 ， 我 们 给 模板 添加 两 个 控制 器 : page1.html 的 PageOneCtr/ 和 page2.html 的 
Page TwoCtrl ° 

更 新 后 的 模板 如 下 : 


«script type="text/ng-template" id-"pagei.html"- 
«ion-view ng-controller="PageOneCtrl"> 
<ion-content> 
<h3>Page 1</h3> 
<button class="button button-dark" ui-sref="page2"> 
Navigate to Page 2 
</button> 
</ion-content> 
</ion-view> 
</script> 
«script type="text/ng-template" id="page2.html"> 
«ion-view ng-controller="PageTwoCtr1"> 
<ion-content> 
<h3>Page 2</h3> 
<button class="button button-dark" ui-sref="pagei"> 
Navigate to Page 1 
</button> 
</ion-content> 
</ion-view> 


</script> 


iA AI I T ion-view Lk d % Pt A A tE de 48 S RG 2862 7m T ng-controller ° 
我 们 需要 去 www/js/app.js 里 面 更 新 这 两 个 生命 的 控制 器 : 


.controller('PageOneCtrl', function($scope, $ionicNavBarDelegate) 


{ 
$ionicNavBarDelegate.title('Page 1'); 
3) 
.controller('PageTwoCtrl', function($scope, $ionicNavBarDelegate) 
{ 
$ionicNavBarDelegate.title('Page 2'); 
$ionicNavBarDelegate.showBackButton(false); 
3) 


我 们 给 page1 和 page2 设 置 了 标题 ,并 且 将 page2 的 showBackButton 设 置 为 false。 保 存 这 些 修 
改 返 回 浏览 器 的 时 候 ， 就 可 以 看 到 你 预想 的 结果 了 。 
其 他 可 以 通过 giomicNavBarDelegate 控 制 的 属性 有 : 


e align: 这 个 是 用 来 指定 标题 ， 按 钮 的 排列 方向 的 :left, right, 以 及 center (默认) 
e showBar : 用 来 设置 或 者 取得 jon-nav-bar 是 否 显 示 


$ionicHistory 


另 一 个 非常 重要 的 导航 服务 是 $ionicHistory。$ionicHistory 持 续 追 踪 所 有 视图 并 记录 用 户 在 视 
图 之 间 的 导航 行为 。 
$ionicHistory 的 优美 之 处 在 于 他 支持 平行 历史 记录 ， 在 这 点 上 ， 浏 览 器 是 按 固定 顺序 存储 的 。 


当 你 的 界面 有 多 个 标签 ， 每 个 标签 都 有 一 套 视 图 RUN ， 平行 历史 记录 就 会 非常 有 用 了 。 

$ionicHistory 可 以 用 来 捕获 标签 级 别 的 历史 记录 ; 意思 是 ， 当 用 户 选 择 标签 2 的 时 候 ， 在 标签 2 

里 面 进行 了 一 些 页 面 导 航 ， 之 后 选择 标签 1， 然 后 点 击 返回 按钮 ; 应 用 不 会 把 用 户 带 回 标签 2 

最 后 显示 的 页 面 ， 而 是 导航 到 标签 页 的 父 容器 的 最 后 显示 页 ， 或 者 如 果 当 前 父 容器 页 面 的 第 
一 个 页 面 的 话 就 退出 了 应 用 。 

回 到 手边 的 范例 ， 更 新 PageTWoCtr/ 为 以 下 : 


.controller('PageTwoCtrl', function($scope, $ionicNavBarDelegate, $ionicHistory) { 
$ionicNavBarDelegate.title('Page 2'); 
$ionicNavBarDelegate.showBackButton(false); 
console.log($ionicHistory.viewHistory()) 


}) 


eo erage Wo 注入 $jonicHistory 依 赖 然后 在 控制 台 记 录 视 图 切换 历史 记录 。 
保存 文件 ， 返 回 浏览 器 ， 然 后 从 page1 导 航 到 page2， 我 们 可 以 看 到 如 下 展示 : 


6 localhost:8100/$/page2 


Q 日 Elements Network Sources Timeline Profiles 


© w <top frame> v Preserve log 


v Object 
v backView: IonicModule,factory.View 
backViewId: null 
canSwipeBack: true 
forwardViewId: "ion3" 
historyId: "root" 
index: 6 
stateId: "page1" 
stateName: "pagel" 
stateParams: undefined 
title: "Page 1" 
url: "/pagel1" 
viewId: "ion2" 
> proto : IonicModule.factory.View 
v currentView: IonicModule. factory.View 
backViewId: "ion2" 
canSwipeBack: true 
forwardViewId: null 
historyId: "root" 
index: 1 
stateId: "page?" 
stateName: "page2" 
stateParams: undefined 
title: "Page 2" 
url: "/page2" 
viewId: "ion3" 
> proto : IonicModule.factory.View 
forwardView: null 
w histories: Object 
» root: Object 
> proto : Object 
v views: Object 
> ion2: IonicModule. factory.View 
> ion3: LonicModule. factory.View 
> proto : Object 
—: Object 


Navigate to Page 1 





ViewHistory 方 法 返回 了 一 个 对 象 ， 里 面 有 backView (也 就 是 之 前 视 
E) ，currentView，Histtories 以 及 应 用 里 面 所 有 其 他 的 视图 的 所 有 信息 。 
可 以 通过 这 个 对 象 得 到 用 户 是 如 何 导 航 到 当前 页 面 的 ; 在 此 情景 之 下 ， 视 图 历史 非常 有 用 。 


NO 


你 依然 可 以 通过 giomicHistory 服 务 的 函数 读 取 视 图 历史 的 独立 属性 ， 例 如 : 


e currentView : 返回 应 用 当前 页 面 

e currentHistoryld : 返回 当前 视图 父 容 器 的 ID 

。 currentTitle : 取得 或 者 设置 当前 视图 的 标题 

e backView : 返回 当前 视图 在 历史 记录 栈 里 面 的 上 一 个 视图 

e forwardView : 然后 历史 栈 中 的 下 一 个 视图 。 前 视图 当中 用 户 从 page1 导 航 至 page2， 然 
后 返回 page1 的 时 候 有 效 。 此 时 page2 就 是 forwardView ° 

e currentStateName : 返回 当前 状态 名 


为 快速 测试 以 上 属性 ， 我 们 更 新 PageOneCtr 和 PageTwoCtrl/ 如 下 : 


.controller('PageOneCtrl', function($scope, $ionicNavBarDelegate,$ionicHistory) { 
$ionicNavBarDelegate.title('Page 1'); 
console.log('currentView', $ionicHistory.currentView()); 
console.log('currentHistoryId', $ionicHistory.currentHistoryId()); 
console.log('currentTitle', $ionicHistory.currentTitle()); 
console.log('backView', $ionicHistory.backView()); 
console.log('backTitle', $ionicHistory.backTitle()); 
console.log('forwardView', $ionicHistory.forwardView()); 
console.log('currentStateName', $ionicHistory.currentStateName()); 

3) 

.controller('PageTwoCtrl', function($scope, $ionicNavBarDelegate,$ionicHistory) { 
$ionicNavBarDelegate.title('Page 2'); 
$ionicNavBarDelegate.showBackButton(false); 
console.log('viewHistory', $ionicHistory.viewHistory()); 


}) 


现在 ， 当 我 们 导航 到 page1 的 时 候 ， 可 以 记录 的 属性 如 下 : 


c localhost:8100/4/page1 


Q 日 Elements Network Sources Timeline Profiles Resources 


© Ww «top frame» v Preserve log 


currentView v IonicModule.factory.View 
backViewId: l 
canSwipeBack: true 
forwardViewId: 
historyId: "root" 
index: @ 
stateId: "pagel" 
stateName: "pagel" 
stateParams: 
title: "Page 1" 
url: "/pagel1" 
viewId: "ion2" 

^ : IonicModule. factory.View 


QUIS IIT IS CER (o ads Te [A 


currentHistoryId root 
currentTitle Page 1 
backView n 

backTitle 

forwardView 
currentStateName pagel 





= 
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然后 ， 当 寻 航 到 Page 2 的 时 候 ， 可 以 看 到 早先 看 到 的 相同 的 值 : 


c localhost:8 100/#/page2 


Q [] Elements Network Sources Timeline Profiles Resources 


© Ww «top frame» v Preserve log 


viewHistory ¥ Object 
> backView: IonicModule. factory. View 
> currentView: IonicModule. factory. View 
forwardView: null 
» histories: Object 
> views: Object 
> proto : Object 


Navigate to Page 1 





最 后 ， 当 你 再 次 导航 回 Page 1 的 时 候 ， 将 会 看 到 有 forwardView 了 : 


c localhost:8100/s/page1 


Q 日 Elements Network Sources Timeline Profiles Resources 


© Y <top frame> Y Preserve log 


currentView * IonicModule. factory.View 
backViewId: null 
canSwipeBack: true 
forwardViewId: "ion3" 
historyId: "root" 
index: 0 
stateId: "page1" 
stateName: “pagel” 
stateParams: undefined 
title: "Page 1" 
url: “/pagel” 
viewId: "ion2" 

> proto : IonicModule. factory. View 


currentHistoryId root 


Navigate to Page 2 


currentTitle Page 1 
backView null 


backTitle null 

forwardView ¥ IonicModule. factory. View 
backViewId: "ion2" 
canSwipeBack: true 
forwardViewId: null 
historyId: "root" 
index: 1 
stateId: "page2" 
stateName: "page2" 
stateParams: undefined 
title: "Page 2" 
url: "/page2" 
viewld: "ion3" 

» roto : IonicModule. factory. View 


currentStateName pagel 
> 





我 已 经 为 page1 和 page 的 /on-view 指 令 设 置 了 cache-view-"false" : I 36 > Lm Pa) 
backView 是 null。 


$ionicHistory 还 有 3 个 其 他 的 方法 : 


e goBack : 默认 状态 路 由 返回 1 个 视图 的 历史 距离 。 你 可 以 传 入 一 个 负 整 数 来 制定 返回 多 少 
个 视图 的 历史 距离 。 因 为 默认 值 是 -1， 所 以 返回 的 是 一 个 视图 的 历史 距离 。 如 果 执 
行 goBack(-2) 那 么 将 返回 两 个 视图 的 历史 距离 。 goBack 不 会 超过 历史 栈 ， 如 果 传 入 的 值 
超过 历史 栈 的 话 ， 会 直接 返回 到 第 一 个 页 面 。 

e clearHistory : 清除 除了 当前 页 面 之 外 的 其 他 历史 栈 

e clearCache : 清除 所 有 缓存 的 视图 
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可 以 使 用 $ionicHistory 的 nextViewOptions 方 法 来 控制 下 一 个 视图 如 何 展示 。 
你 可 以 控制 以 下 选项 : 


e disableAnimate : 禁用 下 一 个 视图 的 动画 效果 
e disableBack : 将 下 一 个 视图 的 backView 设 为 null 
e historyRoot : 将 下 一 个 视图 设置 为 历史 栈 的 根 


将 以 上 属性 添加 到 我 们 的 PageOneCtr| : 


.controller('PageOneCtrl', function($scope, $ionicNavBarDelegate,$ionicHistory) { 
$ionicNavBarDelegate.title('Page 1'); 
console.log('currentView', $ionicHistory.currentView()); 
console.log('currentHistoryId', $ionicHistory.currentHistoryId()); 
console.log('currentTitle', $ionicHistory.currentTitle()); 
console.log('backView', $ionicHistory.backView()); 
console.log('backTitle', $ionicHistory.backTitle()); 
console.log('forwardView', $ionicHistory.forwardView()); 
console.log('currentStateName', $ionicHistory.currentStateName()); 
$ionicHistory.nextViewOptions({ 
disableAnimate: true, 
disableBack: true, 
historyRoot: true 
1); 
3) 


此 时 ， 导 航 到 page2， 控 制 台 的 输出 如 下 : 


eo localhost:8100/#/page2 


Q [) Elements Network Sources Timeline Profiles Resources 


© Y <top frame> v Preserve log 


viewHistory ¥ Object 

backView: 

> currentView: IonicModule.factory.View 
forwardView: nul 

> histories: Object 

v views: Object 
» ion3: IonicModule,.factory.View 
7 : Object 

[I : Object 


Navigate to Page 1 





你 会 发 现 ， 当 点 击 Navigate to Page 2 的 时 候 ， 动 画 效 果 和 过 度 效 果 都 被 禁用 了 ，backView 
zc null ， 最 后 views 属 性 只 有 一 个 视图 : page2» 
你 也 可 以 使 用 这 些 选项 来 控制 你 的 应 用 的 历史 状态 的 行为 。 


标签 与 侧 边 菜单 


为 更 好 的 理解 导航 ， 我 们 将 探索 一 下 tabs 指 令 与 side menud& + » 
新 建 一 个 tfabs 模 板 项 目 ， 后 面 学 习 一 下 与 标签 相关 的 指令 : 


ionic start -a "Example 19" -i app.example.nineteen example19 tabs 


使 用 cq 命令 进入 example19 文 件 夹 ， 运 行 如 下 命令 : 


ionic serve 


此 时 ， 标 签 页 应 用 就 运行 起 来 了 。 

当 你 打开 www/index.html 的 时 候 ， 你 会 发 现 这 个 模板 是 通过 一 个 内 置 jion-nav-back-button 的 
ion-nav-bar 来 管理 页 头 的 。 

接着 ， 打 开 www/js/app.js， 找 到 应 用 的 状态 配置 : 


.state('tab.dash', { 


url: '/dash', 
views: { 
'tab-dash': { 


templateUrl: 'templates/tab-dash.html', 
controller: 'DashCtrl' 


}) 


注意 看 views 对 中 有 一 个 名 为 tfab-dash 的 对 象 。 这 个 会 在 使 用 tabs 指 令 的 时 候 用 到 。 在 选中 
标签 页 的 时 候 ， 这 个 名 字 用 来 加 载 一 个 指定 的 名 为 fab-dash 的 视图 到 jon-nav-view 指 令 中 。 
打开 www/templates/tabs.html， 你 将 会 发 现 标签 页 组 件 的 html 标 记 代 码 : 


«ion-tabs class="tabs-icon-top tabs-color-active-positive"> 
<!-- Dashboard Tab --> 
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ionios-pulse-strong" hre 
f="#/tab/dash"> 
<ion-nav-view name="tab-dash"></ion-nav-view> 
</ion-tab> 
<!-- Chats Tab --> 
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-cha 
tboxes" href="#/tab/chats"> 
<ion-nav-view name="tab-chats"></ion-nav-view> 
</ion-tab> 
<!-- Account Tab --> 
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" hr 
ef="#/tab/account"> 
<ion-nav-view name="tab-account"></ion-nav-view> 
</ion-tab> 
</ion-tabs> 


由 于 标签 状态 是 作为 一 个 抽象 路 由 的 存在 ，tabs.html 将 会 在 其 他 子 标签 加 载 之 前 完成 加 载 。 
ion-tab4& 4- 72 4t A 4£ ion-tabsta 4- €. dn > 4k ^ ion-tabdà 448 A — ^ ion-nav-viewsx ^. X. F » 
当选 中 一 个 标签 的 时 候 ， 与 Jon-nav-Vview 上 的 name 属 性 同名 路 由 将 会 在 对 应 的 标签 页 中 进行 
加 载 。 

非常 整洁 的 架构 ! 


更 多 关于 要 bs 指令 和 他 的 服务 的 信息 请 参 


考 : http://ionicframework.com/docs/nightly/api/directive/ionTabs/ 


接 下 来 ， 我 们 将 创建 一 个 侧 边 菜 单 模板 app， 然 后 学 习 其 中 的 导航 : 
ionic start -a "Example 20" -i app.example.twenty example20 sidemenu 
通过 cq 命令 ， 进 入 example20 文 件 夹 运 行 如 下 命令 : 


ionic serve 


此 时 ， 侧 边 菜单 app 启 动 完成 。 

我 们 先 从 www/index.html 开 始 。 这 个 文件 的 body 里 面 只 有 一 个 ion-nav-view。 接 下 来 ， 我 们 打 
Fwwwijs/app.js ° 在 这 里 ， 路 由 都 按期 望 的 定义 好 了 。 但 是 注意 观察 search，browse 和 
playlist 的 views 的 名 字 ， 他 们 都 是 一 样 的 --menuContent : 


.state('app.search', { 
url: "/search", 
views: { 
'menuContent': { 
templateUrl: "templates/search.html" 


}) 


打开 www/templates/menu.html， 将 会 看 到 ion-side-menu 指 令 。 他 有 两 个 子 元 素 ，jon-side- 
menu-content#*ion-side-menu ° ion-side-menu-content 展 示 了 ion-nav-VieW 里 面 名 

为 menuContent 里 的 每 个 菜单 条 目 。 这 就 是 为 什么 所 有 状态 路 由 器 里 面 的 菜单 条 目 名 字 一 样 
的 原因 。 

jion-side-menu 显 示 在 页 面 的 左边 。 你 可 以 设置 他 的 位 置 在 右边 ， 也 可 以 设置 为 两 边 都 有 。 
注意 观察 ion-nav-buttons 内 部 的 按钮 上 的 menu-toggle 指 令 。 这 个 指令 用 来 切换 侧 边 菜单 的 显 
如 果 想 要 两 边 都 了 菜单 的 话 ，menu.htm| 看 起 来 是 如 下 效果 : 


<ion-side-menus enable-menu-with-back-views="false"> 
<ion-side-menu-content> 
<ion-nav-bar class="bar-stable"> 
<ion-nav-back-button> 
</ion-nav-back-button> 
«ion-nav-buttons side="left"> 
«button class="button button-icon button-clear ionnavicon" menu-toggle="left"> 
</button> 
</ion-nav-buttons> 
<ion-nav-buttons side="right"> 


<button class="button button-icon button-clear ionnavicon" menu-toggle="right" 


</button> 
</ion-nav-buttons> 
</ion-nav-bar> 
<ion-nav-view name="menuContent"></ion-nav-view> 
</ion-side-menu-content> 
<ion-side-menu side="left"> 
<ion-header-bar class="bar-stable"> 
<hi class="title">Left</h1> 
</ion-header -bar> 
<ion-content> 
<ion-list> 
«ion-item menu-close ng-click="login()"> 
Login 
</ion-item> 
<ion-item menu-close href="#/app/search"> 
Search 
</ion-item> 
«ion-item menu-close href="#/app/browse"> 
Browse 


</ion-item> 
<ion-item menu-close href="#/app/playlists"> 
Playlists 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu> 
<ion-side-menu side="right"> 
<ion-header-bar class="bar-stable"> 
«hi class="title">Right</hi> 
</ion-header -bar> 
<ion-content> 
<ion-list> 
<ion-item menu-close ng-click="login()"> 
Login 
</ion-item> 
<ion-item menu-close href="#/app/search"> 
Search 
</ion-item> 
<ion-item menu-close href="#/app/browse"> 
Browse 
</ion-item> 
«ion-item menu-close href="#/app/playlists"> 
Playlists 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu> 
</ion-side-menus> 


参考 此 处 查看 更 多 关于 siae Imenu 指 令 和 他 的 服务 信息 : 


http://ionicframework.com/docs/nightly/api/directive/ionSideMenus 


lonic 加 载 
第 一 个 学 习 的 服务 是 $ionicLoading。 这 个 服务 在 你 想 要 从 主页 上 阻 断 用 户 交互 的 时 候 ， 或 者 
告诉 用 户 后 台 正在 进行 一 些 处 理 的 时 候 非 常 有 用 。 


新 建 一 个 空白 模板 项 目 并 实现 $ionicLoading 来 进行 测试 : 


ionic start -a "Example 21" -i app.example.twentyone example21 blank 


使 用 cq 命令 进入 example21 文 件 夹 ， 运 行 : 


ionic serve 


然后 这 个 项 目 将 会 运行 在 浏览 器 中 。 
然后 我 们 创建 一 个 应 用 控制 器 ， 在 其 中 定义 显示 和 隐藏 的 方法 。 打 开 Www/js/app.js 添 加 以 下 
代码 : 


.controller('AppCtrl', function($scope, $ionicLoading, $timeout) { 
$scope.showLoadingOverlay = function() { 
$ionicLoading.show( { 
template: 'Loading...' 
3 
}; 
$scope.hideLoadingOverlay = function() { 
$ionicLoading.hide(); 
}; 
$scope.toggleOverlay = function() { 
$scope.showLoadingOverlay(); 
// wait for 3 seconds and hide the overlay 
$timeout(function() { 
$scope.hideLoadingOverlay(); 
), 3000); 
}; 
3) 


我 们 有 一 个 叫做 showLoadingOverlay 的 方法 ， 这 个 方法 将 调用 $jonicLoading.show()， 还 有 一 

个 i» 做 hideLoadingOverlay 的 方法 ， 这 个 方法 将 调用 $ionicLoading.hide()。 同时 我 们 也 创建 
一 个 名 为 toggleOverlay() 的 工具 方法 ， 这 个 方法 将 会 调用 showLoadingOverlay 方 法 ，3 秒 钟 
之 后 调用 hideLoadingOverlay ° 

我 们 将 在 www/indqdex.html 的 body 部 分 更 新 如 下 显示 : 


«body ng-app="starter" ng-controller="AppCtrl"> 
«ion-header-bar class="bar-stable"> 
«hi class="title">$ionicLoading service</h1> 
</ion-header -bar> 
<ion-content class="padding"> 
«button class="button button-dark" ng-click="toggleOverlay()"> 
Toggle Overlay 
</button> 
</ion-content> 
</body> 
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RTA — 42 483 A toggle Overlay ° 
保存 所 有 文件 ， 回 到 浏览 器 ， 点 击 Toggle Overlay 按 钮 ， 将 会 看 到 如 图 效果 : 


e localhost:8100 





覆盖 层 将 会 在 $ionicLoading 调 用 hide 方 法 之 前 一 直 显 示 。 
你 可 以 将 上 面 的 逻辑 放 入 一 个 服务 中 ， 然 后 在 应 用 中 重复 利用 。 服 务 代码 如 下 : 


.Service('Loading', function($ionicLoading, $timeout) { 
this.show = function() { 
$ionicLoading.show({ 
template: 'Loading...' 
3); 
}; 
this.hide = function() { 
$ionicLoading.hide(); 
}; 
this.toggle= function() { 
var self = this; 
self.show(); 
// wait for 3 seconds and hide the overlay 
$timeout(function() { 
self.hide(); 
}, 3000); 
}; 
3) 


现在 ， 当 你 想 在 你 的 控制 器 或 者 指令 中 注入 了 Loading 服 务 ， 你 就 可 以 使 

用 Loading.show(),Loading.hide() 和 Loading.toggle() ° 

如 果 你 只 是 想 展示 一 个 微调 图 标 而 不 是 文本 的 话 ， 可 以 直接 调用 $jonicLoading.show 方 法 ， 不 
使 用 任何 选项 : 


$scope.showLoadingOverlay = function() 1 
$ionicLoading.show(); 


ur 
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然后 ， 你 就 可 以 看 到 下 面 这 样 的 效果 : 


- -= Q | locathost:8100 





你 可 以 后 续 再 配置 Show 方法 。 更 新 信息 参考 : 
http://ionicframework.com/docs/nightly/api/service/$ionicLoading/ 可 以 使 

用 $ionicBackdrop 服 务 来 展示 一 个 背景 。 
http://ionicframework.com/docs/nightly/api/service/$ionicBackdrop $ionicModal 与 加 载 服 
务 差不多 : http://ionicframework.com/docs/api/service/$ionicModal 


动作 表单 服务 Action Sheet service 

动作 表单 是 一 个 向 上 滑动 的 展示 了 一 系列 选项 的 面板 。 通 常 ， 当 你 有 一 组 列表 条 目 或 者 格子 
条 目的 时 候 ， 他 用 来 显示 上 下 文选 项 。 动 作 表 单 服务 一 般 用 在 用 户 长 按 列 表 或 者 栅 格 条 目的 
时 候 。 

为 测试 $ionicActionSheet 服 务 ， 我 们 新 建 一 个 空白 模板 项 目 : 


ionic start -a "Example 22" -i app.example.twentytwo example22 blank 


使 用 cq 口令 ， 进 入 example22 文 件 夹 然后 运行 如 下 服务 : 


ionic serve 


然后 浏览 器 中 就 启动 了 这 个 项 目 了 。 
打开 www/js/app.js 新 建 一 个 控制 器 ， 叫 做 AppCtr| : 
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.controller('AppCtrl', function($scope, $ionicActionSheet,$timeout) { 
$scope.showOptions = function() { 
var hideSheet = $ionicActionSheet .show( { 


buttons: [1 

text: 'Open' 
} { 

text: 'Get Link' 
3l, 


destructiveText: 'Delete', 
titleText: 'Options' 

3; 

// hide the sheet after three seconds 

$timeout(function() { 
hideSheet(); 

), 3000); 

}; 
}) 


$ionicActionSheet.show 返 回 了 一 个 方法 ， 当 这 个 方法 执行 的 时 候 ， 关 闭 了 动作 表单 。show 
方法 接受 一 个 对 象 作为 参数 ， 这 个 对 象 有 以 下 几 个 属性 : 


e buttons : 这 个 显示 了 一 个 选项 或 者 按钮 列表 。 
e destructiveText : 高 亮 一 个 指定 的 选项 作为 一 个 危险 操作 
e titleText : 设置 动作 表单 的 标题 


然后 更 新 www/index.html 的 body 部 分 如 下 : 


«body ng-app="starter" ng-controller-"AppCtrl"- 
<ion-pane> 
<ion-header-bar class="bar-stable"> 
<h1 class="title">Action Sheet Example</h1> 
</ion-header -bar> 
<ion-content class="padding"> 
«button class="button button-block button-dark" ng-click="ShowOptions()"> 
Show Options 
«/button» 
</ion-content> 
</ion-pane> 
</body> 
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保存 所 有 文件 ， 回 到 浏览 器 ， 然 后 会 看 到 一 个 Show Options 按 钮 。 点 击 将 会 看 到 如 下 效果 : 


Gc localhost:8100 


Get Link 


Delete 





这 个 动作 表单 将 会 在 3 秒 后 隐藏 。 


在 第 八 草 制作 一 个 聊天 app 的 实际 操作 中 ， 我 们 将 会 用 到 动作 表单 ; 其 中 我 们 会 实现 动 
作 表 单 的 按钮 处 理 器 。 更 多 关于 动作 表单 的 信息 参考 : 
http://ionicframework.com/docs/nightly/api/service/$ionicActionSheet/ 


Popover 与 Popup 服 务 


x oo 旁边 的 一 个 上 下 文 视图 。 这 个 组 件 用 来 显示 上 下 文 信息 或 者 显 
某 组 件 的 更 多 
Mb eee 来 进行 学 习 : 


a 


ionic start -a "Example 23" -i app.example.twentythree example23 blank 


使 用 cd 口令 进入 example23， 运 行 


ionic serve 


à X ga 器 中 将 运 iE f 于 此 项 目 
给 项 目 添加 一 个 新 的 控制 器 ， 名 为 AppCtr1。 控制 器 代码 是 添加 在 www/js/app.js 中 的 : 
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.controller('AppCtrl', function($scope, $ionicPopover) { 
// init the popover 
$ionicPopover.fromTemplateUrl('button-options.html', { 
Scope: $scope 

}).then(function(popover) { 
$scope.popover = popover; 

3); 

$scope.openPopover = function($event, type) { 
$scope.type = type; 
$scope.popover.show($event); 

J; 

$scope.closePopover = function() { 
$scope.popover .hide(); 
// if you are navigating away from the page once 
// an option is selected, make sure to call 
// $scope.popover.remove(); 

J; 

15 


我 们 使 用 的 是 $ionicPopover 服 务 ， 同 一 个 一 个 名 为 buttons-options.html 的 模板 设置 popover 
的 。 可 以 将 当前 控制 器 的 scope 作 为 scope 传 给 popover 。 控制 器 scope 上 有 两 个 方法 用 来 显示 
和 隐藏 popover。OpenPopover 方 法 接受 两 个 选项 。 一 个 是 事件 ， 另 一 个 是 我 们 当前 点 击 的 按 
fang RA (同时 的 ) e 

接 下 来 ， 将 www/index.html 的 body 部 分 改 为 如 下 : 


«body ng-app="starter" ng-controllerz"AppCtrl"» 
«ion-header-bar class="bar-positive"> 
«hi class="title">Popover Servicec/hi» 
</ion-header -bar> 
<ion-content class="padding"> 
«button class="button button-block button-dark" ngclick="openPopover($event, ‘dark 
"ys 
Dark Button 
</button> 
«button class="button button-block button-assertive" ng-click="openPopover ($event, 
'assertive')'» 
Assertive Button 
«/button» 
«button class="button button-block button-calm" ng-click="openPopover($event, 'cal 
m')'"» 
Calm Button 
«/button» 
«/ion-content» 
«script id="button-options.html" type="text/ng-template"> 
<ion-popover -view> 
<ion-header -bar> 
«hi class="title">{{type}} options</h1> 
</ion-header -bar> 
<ion-content> 
<div class="list"> 
<a href="#" class="item item-icon-left"> 
<i class="icon ion-ionic"></i> Option One 
</a> 
<a href="#" class="item item-icon-left"> 
<i class="icon ion-help-buoy"></i> Option Two 
</a> 
<a href="#" class="item item-icon-left"> 
<i class="icon ion-hammer"></i> Option Three 
</a> 
«a href="#" class="item item-icon-left" ng-click="closePopover()"> 
«i class="icon ion-close"></i> Close 
</a> 
</div> 
</ion-content> 
</ion-popover -view> 
</script> 
</body> 


在 ion-comntent 中 ， 我 们 创建 了 3 个 按钮 ， 每 个 的 心情 颜色 都 不 一 样 (黑暗 ， 武 断 与 冷静 ) 。 当 
用 户 点 击 按钮 的 时 候 ， 显 示 按 钮 指定 的 popover。 在 这 个 范例 中 ， 我 们 只 是 把 心情 传 进去 ， 然 
后 将 心情 作为 popover 的 页 头 。 明 显 ， 你 可 以 做 更 多 的 逻辑 。 

注意 ， 我 们 的 模板 内 容 都 是 包装 在 ion-popover-vieW 里 面 的 。 他 会 负责 对 恰当 的 modal 对 位 。 
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为 了 使 popover 工 作 正 常 ， 模 板 必须 包 p EM e 。 保存 所 有 文件 ， 返 回 
浏览 器 ， 我 们 会 看 到 3 个 按钮 。 点 击 其 中 一 个 按钮 ，popover 的 页 头 将 会 改变 ， 但 是 
却 都 是 一 样 的 : 





然后 ， 当 我 们 点 击 页 面 上 的 任何 地 方 或 者 关闭 选项 的 时 候 ，popover 就 会 关闭 。 


如 果 在 选中 选项 的 时 候 想 要 导航 到 其 他 页 面 的 话 ， 一 定 要 调 
用 :$scope.popoverremove(); 更 多 关于 Popover 的 信息 ， 参 考 : 
http://ionicframework.com/docs/api/controller/ionicPopover/ 
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词汇 求助 : 


e popover: 
e pin dialog: 


ionicPopup 


接 下 来 学 习 的 服务 是 $ionicPopup。 这 个 服务 用 来 创建 一 个 弹出 框 以 供用 户 响 应 来 确定 


续 。 
这 些 弹 出 框 都 是 JavaScript 本 身 的 alert，prompt 和 confirm 方 法 的 自 定义 样式 。 
新 建 一 个 空白 模板 项 目 进行 测试 : 


ionic start -a "Example 24" -i app.example.twentyfour example24 blank 
通过 cq 命令 进入 到 example24 文 件 夹 运行 如 下 命令 : 


ionic serve 


然后 浏览 器 中 将 会 运行 此 项 目 。 
我 们 将 会 实现 展示 ， 确 认 和 警告 方法 的 app 样 式 。 


我 们 将 使 用 Show 方法 显示 一 个 pin 对 话 框 ， 用 户 需 要 在 这 个 对 话 框 中 输入 pin。 如 果 pin 有 效 ， 
我 们 就 给 用 户 展 示 一 个 我 们 代码 的 安全 区 域 。 安 全 区 域 有 一 些 展示 确认 框 和 警告 框 的 按钮 。 
如 果 用 户 直 接 退 出 了 pin 对 话 框 ， 我 们 将 把 用 户 带 到 一 个 不 安全 区 域 ， 然 后 重新 询问 用 户 一 


È o 
此 范例 使 用 AngularJS 和 lonic 介 绍 了 一 个 根据 条 件 显 示 内 容 的 途径 。 
创建 一 个 AppCtr/ 控 制 器 作为 开始 。 在 www/js/app.js 中 ， 添 加 以 下 代码 : 


.controller('AppCtrl', function($scope, $ionicPopup) { 
$scope.data = {}; 
$scope.state = {}; 
$scope.error = {}; 
$scope.prompt = function() { 
// reset app states 
$scope.state.cancel = false; 
$scope.state.success = false; 
// reset error messages 
$scope.error.empty - false; 
$scope.error.invalid - false; 
var prompt = $ionicPopup.show(í 
templateUrl: 'pin-template.html', 
title: 'Enter Pin to continue', 
Scope: $scope, 
buttons: [1 
text: 'Cancel', 


}) 


onTap: function(e) { 
$scope.state.cancel = true; 
} 
}, { 
text: '<b>Login</b>', 
type: 'button-assertive', 
onTap: function(e) { 
$scope.error.empty - false; 
$scope.error.invalid - false; 
if (!$scope.data.pin) { 
// disable close if the 
// user does not enter 
// a valid pin 
$scope.error.empty - true; 
e.preventDefault(); 
) else { 
if ($scope.data.pin === '1234') { 
$scope.state.success = true; 
return $scope.data.pin; 
) else { 
$scope.error.invalid - true; 
e.preventDefault(); 


}; 
$scope.confirm = function() { 
var confirm = $ionicPopup.confirm( { 
title: 'Confirm Popup Heading', 
template: 'Are you sure you want to do that?' 
3); 
confirm.then(function(res) { 
if (res) { 
console.log('Yes!'); 
) else { 
console.log('Nooooo!!'); 
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}; 
$scope.alert = function() { 
var alert = $ionicPopup.alert({ 
title: 'You are secured!', 
template: 'You are inside a secure area!' 
3; 
alert.then(function(res) { 
console.log('Yeah!! I know!!'); 
3; 
}; 
// invoke the prompt on controller init. 
$scope.prompt(); 


代码 好 多 啊 ! ! (作者 原 话 ) 但 是 也 很 简单 。 (作者 原 话 ) 好 长 ， 懒 得 看 ， 后 续 跑 代码 的 时 
候 再 看 。 ( 译 者 原 话 ) 

我 们 在 scope 上 创 DNE 分 别名 为 data，state， 和 error。 这 些 对 象 将 用 来 存储 数据 ， 
应 用 状态 和 错误 信 ， 

我 们 添加 了 一 人 Mec 法 。 在 这 个 方法 里 面 ， 我 们 调用 了 $ionicPopup.show 方 法 ， 传 入 模 
板 和 取消 按钮 以 及 Login 按 钮 的 点 击 方法 的 定义 。 当 用 户 点 击 了 prompt 的 Cancel 按 钮 的 时 
候 ， 我 们 将 状态 对 象 的 camcel 属 性 设置 为 tue。 这 个 属性 将 用 作 切 换 视 图 。 

当 用 户 点 击 Login 按 钮 的 时 候 ， 我 们 将 会 检查 是 否 输 入 了 有 效 的 pin。 如 果 没 有 的 话 ， 我 们 会 
将 对 于 的 错误 信息 设置 为 true。 如 果 用 户 输入 了 ud d ad i MM ， 我 们 会 把 状态 
对 象 上 的 success 属 性 设置 为 true。 这 样 将 会 切换 到 另 一 个 视图 ， 这 个 视图 上 将 会 有 Confirm 
和 Alert 按 钮 。 

confirm 和 alert 方 法 都 是 自 解释 性 的 。 他 们 分 别 使 用 $ionicPopup.confirm 和 $ionicPopup.alert 
进行 设置 。 这些 方 法 返回 一 个 promise ， 当 在 点 击 按钮 的 时 候 ， 就 可 以 解析 了 。 

最 后 ， 我 们 在 控制 器 加 载 的 时 候 调用 prompt 方 法 来 显示 Pin 对 话 框 。 

www/index.html 的 body 部 分 更 新 如 下 : 


«body ng-app="starter" ng-controller-"AppCtrl"- 
«ion-pane ng-cloak» 
«ion-header-bar class="bar-positive"> 
«hi class="title">Super Secure App</h1> 
</ion-header -bar> 
<ion-content class="padding"> 
«div class="card" ng-show="state.cancel"> 
«div class="item item-divider"> 
Oops!! you cancelled! 
</div> 
<div class="item item-text-wrap"> 
To see the secure content enter pin 
<button class="button button-assertive buttonblock" ng-click="prompt()"> 
Try Again! 
</button> 
</div> 
</div> 
<div class="card" ng-show="state.success"> 
«div class="item item-divider"> 
You are viewing secure content! 
</div> 
«div class="item item-text-wrap"> 
«button class="button button-positive buttonblock" ng-click-"confirm()"» 
Show Confirm Dialog 
«/button» 
«button class="button button-positive buttonblock" ng-click="alert()"> 
Show Alert Dialog 
«/button» 
«/div» 
«/div» 
«/ion-content» 
</ion-pane> 
<script type="text/ng-template" id-"pin-template.html"- 
<input type="password" ng-model="data.pin"> 
<label ng-show="error.empty" class="assertive text-center 
block padding">Please enter a valid Pin</label> 
<label ng-show="error.invalid" class="assertive textcenter block padding">Invalid 
Pin, Try Again!</label> 
</script> 
</body> 


我 们 添加 了 两 个 卡片 视图 ; 一 个 在 state.cance/ 为 true 的 时 候 显示 ， 另 一 个 在 state.success 

为 true 的 时 候 显示 。 在 body 标 签 的 最 后 ， 我 们 添加 了 pin-template.html 模 板 。 

重点 关注 一 下 我 们 给 jon-panel/ 指 令 添 加 的 ng-cloak 属 性 。 这 个 属性 确保 了 AngularJS 处 理 完成 
之 前 不 显示 任何 内 容 。 


更 多 信息 关于 ng-cloak 请 参考 : https://docs.AngularJS.org/api/ng/directive/ngCloak 
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保存 所 有 文件 ， 返 回 浏览 器 ， 将 会 看 到 : 


- C localhost:8100 


Enter Pin to continue 


在 不 输入 任何 数据 的 情况 下 点 击 Login， 将 会 显示 : 


localhost:8100 


Enter Pin to continue 


Please enter a valid Pin 
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在 输入 一 个 无 效 的 pin 的 时 候 ， 将 会 看 到 : 


Ji. C localhost:8100 


Enter Pin to continue 


Invalid Pin, Try Again! 








取消 弹出 框 的 时 候 ， 会 把 你 带 到 一 个 不 安全 的 区 域 ， 这 里 更 你 另 一 次 做 人 的 机 会 : 


^ € | localhost:8100 


Super Secure App 


Oops!! you cancelled! 


To see the secure content enter pin 
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终于 ， 在 你 输入 了 有 效 的 pin 值 之 后 ， 你 会 被 带 到 一 个 安全 区 域 ， 其 中 可 以 看 到 Confirm 和 
Alert 按 钮 。 点 击 他 们 之 后 会 看 到 : 





© localhost:8100 


Confirm Popup Heading You are secured! 


Are you sure you want to do that? You are inside a secure area! 





上 面 的 代码 不 仅 讨论 了 $jonicPopup 服 务 ， 也 让 你 知道 了 如 何 搭建 自己 的 应 用 。 


ion-list 和 ion-item 指 令 


鉴于 咱们 是 在 熟悉 大 部 分 的 lonic 指 令 和 服务 ， 我 想 应 该 值得 提 一 下 ion-list 和 ion-item 指 令 。 
在 移动 应 用 中 ， 列 表 是 使 用 最 广泛 的 显示 模式 之 一 。 在 lonic 中 ， 我 们 可 以 像 在 第 三 章 Ionic 
CSS 组 件 和 导航 中 那样 使 用 CSS 版 本 的 列表 ， 或 者 使 用 指令 版 的 列表 。 

使 用 指令 版 的 列表 的 好 处 是 他 提供 了 很 多 额外 属性 用 来 更 好 的 管理 列表 ， 例 如 : ion-delete- 
button, ion-reorder-buttonvA & jon-option-button ° 

新 建 一 个 空白 模板 项 目 进行 测试 : 


ionic start -a "Example 25" -i app.example.twentyfive example25 blank 


老 规矩 : 


ionic serve 
然后 浏览 器 就 运行 了 这 个 项 目 了 。 
我 们 将 实现 一 个 lonic 文 档 里 面 提供 的 范例 ， 涵 盖 上 面 提 到 的 所 有 指令 。 


接 下 来 的 范例 来 源 于 这 里 ， 不 同 的 是 我 们 改 为 通过 工厂 添加 数据 的 : 
http://codepen.io/ionic/pen/JsHif 


首先 ， 我 们 创建 一 个 工厂 用 来 分 发 随机 的 数据 给 列表 。 工 厂 和 我 们 在 example17 里 面 使 用 的 那 
个 差不多 ， 除 了 返回 的 数据 有 所 不 同 : 
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.factory('DataFactory', function($timeout, $q) { 


var API 


SAL 


getData: function(count) { 


ho 


// Spoof a network call using promises 
var deferred - $q.defer(); 

var data - [], 

SOR 


count = count || 20; 


for (var i = 0; i < count; i++) { 
o={ 
// http://stackoverflow.com/a/8084248/1015046 
alfa] ak, ee aly, 
title: (Math.random() + 1).toString(36).substring(7) 
}; 
data.push(_o); 
H 


$timeout(function() { 
// success response! 
deferred.resolve(data); 
}, 1000); 


return deferred.promise; 


return API; 


}) 


此 处 返回 了 一 个 带 有 ja 和 te 属性 的 对 象 。 


接 下 来 会 在 wwws/app.js 创 建 一 个 名 为 AppCtn 的 控制 器 。 他 将 负责 从 工厂 拿 取 数 据 以 及 建立 


列表 。 同 时 ， 我 们 将 为 Edit, Delete 以 及 Option 按 钮 提供 点 击 处 理 函 数 : 


.controller('AppCtrl', function($scope, DataFactory) { 
$scope.items - []; 
$scope.data - ( 
showDelete: false 


T 


$scope.edit = function(item) { 
alert('Edit Item: ' + item.id); 
J; 


$scope.share = function(item) { 
alert('Share Item: ' + item.id); 


F; 


$scope.moveItem = function(item, fromIndex, toIndex) { 
$scope.items.splice(fromIndex, 1); 
$scope.items.splice(toIndex, 0, item); 


}; 


$scope.onItemDelete = function(item) { 
$scope.items.splice($scope.items.indexOf(item), 1); 


3 


// get data on page load 
DataFactory.getData().then(function(data) { 
$scope.items = data; 
}); 

}) 


接着 ， 修 改 www/index.html 的 body 部 分 : 


«body ng-app="starter" ng-controller="AppCtrl"> 
<!-- http://codepen.io/ionic/pen/JsHjf --> 
«ion-header-bar class="bar-positive"> 


<div class="buttons"> 
«button class="button button-icon icon ion-ios-minusoutline" ng-click="data. show 


Delete = !data.showDelete; data.showReorder = false"></button> 
</div> 
<hi class="title">Ionic Lists</h1> 
<div class="buttons"> 
<button class="button" ng-click="data.showDelete = 
false; data.showReorder = !data.showReorder"» 
Reorder 
</button> 
</div> 
</ion-header -bar> 


<ion-content> 
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder"> 


<ion-item ng-repeat="item in items" item="item" class="item-remove-animate"> 
{{ item.id }}. {{ item.title }} 
«ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"> 


</ion-delete-button> 
«ion-option-button class="button-assertive" ng-click="edit(item)"> 
Edit 
</ion-option-button> 
«ion-option-button class="button-calm" ng-click="Share(item)"> 
Share 
</ion-option-button> 
«ion-reorder-button class="ion-navicon" on-reorder="movelItem(item, $fromIndex, 
$toIndex)"></ion-reorderbutton> 
</ion-item> 
</ion-list> 
</ion-content> 
</body> 


页 头 里 有 两 个 两 个 按钮 用 来 切换 列表 上 的 删除 和 重 排 图 标 。 在 jon-list 指 令 中 ， 我 们 使 用 了 
show-delete 和 show-reorder 属 性 来 显示 和 隐藏 列表 条 目 上 的 图 标 。 
在 每 个 jon-item 指 令 中 ， 我 们 添加 了 ion-delete-button 来 调用 onltemDelete 部 数 ; 添加 了 jon- 


option-button 来 显示 Share 和 Edit 按 钮 ;最 后 添加 了 jon-reorfer-button 来 显示 重 排 图 标 。 重 排 
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的 时 候 ， 我 们 将 调用 moveltem 方 法 。 
保存 所 有 文件 ， 返 回 浏览 器 ， 可 以 看 到 : 


> C localhost:8 100 


lonic Lists 


1. rok93qjv2t9 


2. qkt1e3a0pb9 


3. k282w97!di 


4. hn8e4z8semi 


5, ut3ce4s4i 





点 击 页 头 的 删除 图 标的 时 候 : 
> C localhost:8100 


lonic Lists 


1. rok93qjv2t9 
2. qkt1e3a0pb9 


3. kK282w97idi 


4. hnBe4z8semi 


5. ut3ce4s4i 
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可 以 通过 点 击 条 目 左 边 的 删除 图 标 来 删除 他 。 点 击 页 头 的 重 排 按钮 的 时 候 : 
c 


3 localhost:8100 


lonic Lists Reorder 





1. rok93qjv2t9 


5. ut3ce4s4i 


6. 6tu1ccmobt9 


7. mxh1f1g7gb9 


8. scc723dte29 


可 以 使 用 每 行 提供 的 操作 随便 移 着 玩 。 你 也 可 以 关闭 重 排 ， 擦 掉 条 目的 左边 显 区 域 ， 显 


lonic Lists 


1. 3w81rod2t9 


5. mi8rxw7y14i 


7. ilx8ugnwmi 


8. givsb32fbt9 





示 Share 和 Edit 选 项 。 


在 使 用 cojection-repeat 替 代 ng-repeat 的 情况 下 ， 重 排 将 会 有 问题 。 请 参考 : 
https://github.com/driftyco/ionic/issues/1714 更 多 列表 信息 ， 请 参考 : 
http://ionicframework.com/docs/api/directive/ionList/ 


手势 指令 和 服务 


接 下 来 的 指令 和 服务 都 是 关于 手势 的 。 手 势 是 用 户 在 与 应 用 交互 是 在 屏幕 上 的 操作 行为 。 一 
个 简单 的 例子 就 是 ， 在 屏幕 上 进行 捏 的 手势 的 时 候 缩 小 ， 拉 的 时 候 进行 放大 。 

lonic 通 过 $ionicGesture 支 持 这 些 手势 。 

为 了 使 讲解 更 通用 ， 我 将 解释 一 个 手势 指令 然后 给 你 展示 如 何 使 用 他 。 此 逻辑 可 以 应 用 与 所 
有 其 他 手势 。 

新 建 一 个 空白 模板 项 目 来 测试 on-drag-up 指 令 
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ionic start -a "Example 26" -i app.example.twentysix example26 blank 


使 用 cq 口令 进入 example26 文 件 夹 运行 如 下 命令 : 


ionic serve 


之 后 ， 项 目 将 会 在 浏览 器 中 运行 。 
首先 ， 在 www/js/app.js 中 创建 一 个 名 为 AppCtr/ 的 控制 器 : 


.controller('AppCtrl', function($scope, $ionicGesture) { 
$scope.scopeGesture = 'None'; 
$scope.delegateGesture - 'None'; 


$scope.onDragUp = function() { 
$scope.scopeGesture - 'Drag up fired!' 


T: 


// Event listener using event delegation 
// The logic below would be typically written in a directive 
// We have added this to the controller for illustration 


purposes 
var $element = angular.element(document.querySelector('#gestureContainer')); 
$ionicGesture.on('dragup', function() { 
$scope.delegateGesture - 'Drag up fired!'; 
), $element); 
1j, 
我 们 之 前 说 过 ， 我 们 要 实现 qragup 手 势 。 我 们 用 了 两 种 方法 实现 了 ， 一 个 是 使 用 指令 ， 这 个 


d dd 以 通过 HTML 模 板 看 到 ， 另 一 个 是 使 用 WomicGesture.om 方 法 实现 的 。 

通常 任何 与 DOM 相 关 的 代码 都 将 写成 一 个 〈 自 定义 的 ) 指令 。 在 这 里 ， 我 们 将 他 写 在 控制 器 
里 面 以 明 目 的 。 事 件 类 型 是 oragup 。 e open querySelectorAPI| 来 取得 DOM 元 
素 ， 然 后 将 此 元 素 封 装 到 一 个 AngularJS 元 素 对 象 中 。 这 个 对 象 将 作为 $ionicGesture.on 方 法 
的 第 三 uy o 
接 下 来 ， 更 改 wwwMnaex.htm/ 的 body 部 分 : 


«body ng-app="starter" ng-controller-"AppCtrl"- 
«ion-header-bar class="bar-dark"> 
«hi class="title">Gestures</h1> 
</ion-header -bar> 
<ion-content> 
<div class="card"> 
«div id-"gestureContainer" class-"item text-center" on-drag-up="onDragUp( ) 


us 
Drag me up!! 
</div> 
</div> 
<div class="card"> 
<div class="item text-center"> 
Scope Gesture : {{scopeGesture}} 
<br> 
Delegate Gesture : {{delegateGesture}} 
</div> 
</div> 
</ion-content> 
</body> 


我 们 创建 了 两 个 卡片 容器 ; 第 一 个 包含 了 一 个 ID 名 为 gestureContainer 的 div， 他 的 on-drag-up 
属性 将 在 事件 触发 的 时 候 执 行 onDragUp 方 法 。 

第 二 个 荣 是 是 由 ScopeGesture 的 值 组 成 的 ， 这 些 值 将 会 在 onDragUp 方 法 执行 的 时 候 进 行 更 

新 。 站 om 方法 发 出 qragup 事 件 的 时 候 进 行 设置 。 

保存 所 有 文件 ， 返 回 浏览 器 ， 可 以 看 到 这 两 个 卡片 部 分 。 当 你 拖 动 第 一 个 卡片 内 容 的 时 候 ， 

第 二 个 卡片 的 显示 内 容 将 会 更 新 ， 如 下 : 


e localhost:8100 


Gestures 


Drag me up!! 


Scope Gesture : Drag up fired! 
Delegate Gesture : Drag up fired! 
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管理 手势 非常 简单 ! 下 面 表 格 显示 的 是 可 用 于 $ionicGesture.on 方 法 中 的 手势 指令 以 及 他 的 事 
件 类 型 。 可 以 用 上 述 代码 来 实现 以 下 任何 一 个 手势 : 


$ionicGesture.on()) 
Drag right 


Drag left 
Dmg [oaas lee — | 


也 可 以 使 用 jonic.EventController 工 具 来 实现 手势 操作 。 请 参 

考 : http://ionicframework.com/docs/api/utility/ionic.EventController/#onGesture 默认 
lonic 会 移 除 浏览 器 添加 的 300ms 点 击 延迟 。 浏 览 器 添加 这 个 延迟 是 用 来 区 别 单 击 与 双击 
的 。 如 果 想 要 给 某 元 素 应 用 这 个 300ms 的 延迟 ， 那 么 请 使 用 data-tap-disabled 属 性 。 更 
多 信息 ， 参 考 : http://ionicframework.com/docs/api/page/tap/ 
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工具 


本 章 最 后 的 一 个 主题 我 们 将 用 来 探索 Ionic 提 供 的 一 些 工 具 服务 。 首 先 要 上 的 

x $ionicConfigProvider ° 

lonic 黑 认 是 根据 他 的 运行 环境 插入 到 应 用 配置 里 面 的 。 并 且 ， 某 些 属 性 将 根据 环境 选择 性 的 
去 使 用 ， 例 如 transition。 些 这 本 书 的 时 候 ，lonic 官 方 只 支持 Android 和 iOS。 尽 管 如 此 ，lonic 
在 其 他 平台 上 也 是 可 以 使 用 的 。 

所 有 配置 都 是 基于 app 的 运行 的 环境 的 。 如 果 运 行 环境 既 不 是 Android 也 不 是 ijOS， 那 么 将 默认 
给 他 使 用 iOS 配 置 。 

但 是 ， 我 们 还 是 可 以 通过 8iomicConfjgProviae/r 服 务 来 控制 这 些 选择 。 可 以 通过 如 下 方法 来 履 
盖 默 认 值 : 


.config(function ($ionicConfigProvider) { 
$ionicConfigProvider.views.transition('none'); 
$ionicConfigProvider.views.maxCache(10); 
$ionicConfigProvider.form.checkbox('circle'); //square or circle 
$ionicConfigProvider.tabs.style('striped'); // striped or standard 
$ionicConfigProvider.templates.maxPrefetch(10); 
$ionicConfigProvider.navBar.alignTitle('right'); 


}) 


也 可 以 通过 以 下 方法 为 指定 平台 重 写 配置 的 默认 值 : 


.config(function($ionicConfigProvider) { 
// Checkbox style. Android defaults to square and iOS defaults to circle. 
$ionicConfigProvider.platform.ios.form.checkbox('square'); 
$ionicConfigProvider.platform.android.form.checkbox('circle'); 


}) 


可 重 写 的 属性 请 参考 : 


http://ionicframework.com/docs/api/provider/$ionicConfigProvider/ 


lonic 通 过 jonic.platform 提 供 了 一 系列 的 工具 方法 。 可 以 使 用 这 个 对 象 提 供 的 方法 来 检查 环境 
信息 


aus. 


.config(function() { 
console.log('ionic.Platform.isWebView()', ionic.Platform.isWebView()); 
console.log('ionic.Platform.isIPad()',ionic.Platform.isIPad()); 
console.log('ionic.Platform.isIOS()', ionic.Platform.isI0S()); 
console.log('ionic.Platform.isAndroid()', ionic.Platform.isAndroid()); 
console.log('ionic.Platform.isWindowsPhone()', ionic.Platform.isWindowsPhone()); 


}) 


其 他 jonic.platform 方 法 请 查看 : http://ionicframework.com/docs/api/utility/ionic.Platform/ 


还 有 一 些 其 他 的 方法 帮 你 与 DOM 进 行 交互 。 这 些 方 法 在 jonic.DomUtil/ 对 人 象 里 面 可 以 找到 。 以 
下 列举 其 中 一 些 : 


.controller('AppCtrl', function($scope) { 
var $element = angular.element(document.querySelector('#someElement' ) ); 
console.log(ionic.DomUtil.getParentWithClass(S$element, '.card')); 
console.log(ionic.DomUtil.getParentOrSelfWithClass(S$element, '.card')); 
// requestAnimationFrame example 
function loop() { 
console.log('Animation Frame Requested'); 
ionic.DomUtil.requestAnimationFrame(loop); 
} 
loop(); 
}) 


其 他 jonic.DomUti/ 方 法 请 查看 : http://ionicframework.com/docs/api/utility/ionic.DomUtil/ 


最 后 ， 我 们 来 看 一 下 lonic 的 事件 控制 器 (Event Controller) 。 他 是 由 事件 和 手势 的 监听 和 移 
除 监 听 的 方法 所 组 成 的 。 你 也 可 以 使 用 jionic.EventController 的 trigger 方 法 来 触发 事件 。 

以 下 部 分 展示 了 如 何 使 用 jonic.EventController 来 对 事件 和 手势 进行 绑 定 ， 触 发 以 及 接触 绑 定 
的 。 

再 次 声明 ， 以 下 逻辑 需要 去 指令 里 面 实现 ， 然 后 在 想 要 的 元 素 上 应 用 此 指令 : 


.controller('AppCtrl', ['$scope', function($scope) { 
// REF 
var $body = document.querySelector('body'); 
var eventListener = function() { 
console.log('Body Tapped!'); 
ionic.EventController.off('tap', eventListener, $body); 
J; 
ionic.EventController.on('tap', eventListener, $body); 
ionic.EventController.trigger('tap', { 
target: $body 
15 


// 绑 定 手势 

var cancelSwipeUp; 

var gestureListener = function() { 
console.log('Body Swiped Up!'); 
ionic.EventController.offGesture(cancelSwipeUp, 'swipeup', gestureListener); 


} 


cancelSwipeUp = ionic.EventController.onGesture('swipeup', gestureListener, $body) 


ionic.EventController.trigger('swipeup', { 
target: $body 
1; 
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本 章 中 ， 我 们 学 习 了 大 量 的 lonic 指 令 和 服务 以 帮助 我 们 轻松 的 创建 应 用 。 我 们 先 从 lonic 
Platform 服 务 入 手 ， 然 后 进入 到 页 头 和 页 脚 指令 。 接 下 来 ， 我 们 贯穿 了 所 有 内 容 相 关 
(content-related) 的 指令 和 导航 相关 (navigation-related ) 的 指令 和 服务 。 接 着 ， 我 们 学 习 
1— TAX (overlay) » 然后 ， 我 们 快速 的 了 解 了 列表 指令 ， 手 势 ， 以 及 工具 服务 。 
完成 这 些 之 后 ， 我 们 完成 了 对 整个 lonic 的 熟悉 过 程 。 从 下 一 章 开 始 ， 我 们 将 利用 这 些 组 件 来 
制作 简单 和 复杂 的 应 用 。 
在 下 一 章 里 ， 我 们 将 制作 一 个 书店 (Book Store) 应 用 ， 用 户 可 以 在 其 中 进行 注册 和 登入 操 
作 。 用 户 可 以 通过 浏览 书 的 目录 将 他 们 添加 到 购物 车 。 用 户 也 可 以 在 他 们 的 档案 里 面 检 出 书 
籍 以 及 查看 购物 历史 。 这 个 应 用 展示 了 如 何 整合 lonic 与 一 个 安全 的 REST 风 格 的 后 端 服务 。 


第 六 草 制作 一 个 书店 应 用 


到 目前 为 止 ， 我 们 学 习 了 所 有 lonic 的 关键 元 素 。 本 章 中 ， 我 们 将 利用 之 前 所 学 来 制作 一 个 书 
店 应 用 。 本 章 的 主要 目的 是 巩 国之 前 所 学 ， 同 时 ， 理 解 如 何 整合 lonic app 与 已 知 的 REST 服 


务 。 


记 住 ， 我 们 不 会 写 任何 服务 端 代码 


我 们 将 制作 一 个 简单 的 多 页 面 Ionic 客 户 端 ， 用 来 供用 户 浏 览 书籍 ， 无 需 认 证 。 只 有 在 用 户 添 
加 书籍 到 购物 车 ， 或 者 浏览 订购 历史 记录 的 时 候 ， 我 们 才 要 求 用 户 进行 登录 。 不 强制 用 户 要 
进行 登录 之 后 才 浏 览 内 容 ， 而 是 在 有 需要 的 时 候 才 进行 登录 认证 ， 这 样 做 可 以 带 来 更 好 的 用 
户 体 验 。 
用 户 登 录 之 后 ， 就 可 以 添加 书籍 到 购物 车 ， 查 看 购物 车 ， 以 及 查看 订单 。 应 用 的 数据 将 会 由 
一 个 使 用 JSON Web Token 的 安全 的 REST 服 务 器 管理 。 
开发 过 程 中 ， 我 们 将 会 学 习 以 下 主题 : 

e 学 习 应 用 的 点 对 点 架构 

© 在 本 机 设置 服务 器 或 者 订购 主机 服务 

e 分 析 应 用 将 要 用 到 的 视图 ， 控 制 器 和 工厂 组 件 :6.3.1 6.3.2 

e 应 用 视觉 测试 

关于 本 章 ， 你 也 可 以 通过 以 下 Github 目 录 来 访问 源 代 码 ， 发 起 issue， 与 作者 沟通 : 
https://github.com/learning-ionic/Chapter-6 


用 到 的 名 词 : 


e end to end 端 对 端 

e end point 终端 接口 

e request 请 求 

e pagination 分 页 

e data persistence layer 数据 持久 层 
e grid system 格子 系统 ， 栅 格 系统 


书店 应 用 的 介绍 


本 章 将 开发 一 个 书店 应 用 。 之 前 也 说 过 ， 用 户 在 其 中 可 以 进行 注册 和 登录 。 用 户 可 以 在 未 经 
认证 的 情况 下 浏览 书籍 。 用 户 可 以 添加 书籍 到 购物 车 ， 查 看 购物 车 ， 检 出 购物 车 。 用 户 在 有 
了 购物 记录 之 后 ， 就 可 以 浏览 他 们 的 订购 历史 页 。 

应 用 功能 非常 简单 ， 但 是 想 要 提升 应 用 的 等 级 的 话 ， 就 必须 要 给 应 用 整合 一 个 安全 的 REST 
API 服 务 端 ， 服 务 端 使 用 的 是 Node.js 开 发 ， 使 用 了 JSON Web Token 进 行 认 证 。 由 于 我 们 本 
机 以 及 设置 好 了 Node.js， 所 以 设置 服务 器 不 会 很 复杂 。 如 果 你 不 想 在 本 机 搭建 服务 端的 话 ， 
你 也 可 以 在 下 一 章 中 找到 一 个 外 部 主机 的 连接 。 

一 些 终端 接口 是 使 用 JSON Web Token (JWT) 加 密 的 ， 例 如 检 出 和 查看 订购 清单 。 服 务 器 的 
设置 方式 是 这 样 的 : 当 一 个 TEST 客户 端 〈 例 如 lonic app) 想 要 获取 应 用 数据 ; 那么 它 在 请 求 
的 时 候 就 必须 发 送 有 效 的 token 。 

应 用 的 工作 流 是 这 样 的 : 


用 户 局 动 app 

用 户 无 需 认 证 就 可 以 浏览 数据 

用 户 想 要 添加 书籍 到 购物 车 或 者 查看 订单 

用 户 想 要 注册 或 者 登录 

注册 或 者 登录 成 功 ， 服 务 端 将 会 返回 一 个 有 效 期 7 天 的 token 

当 客 户 端 进行 一 些 操作 的 时 候 (例如 ， 添 加 到 购物 车 ， 或 者 查看 订单 ) ， 它 就 会 需要 向 
对 应 的 REST 终 端 发 送 请 求 ， 请 求 中 会 包含 token。 如 果 请 求 有 效 ， 并 且 对 应 当前 用 户 ， 
我 们 就 给 他 分 发 数据 ; 否则 ， 我 们 将 禁止 用 户 访问 或 者 更 新 数据 。 
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下 一 个 部 分 ， 我 们 将 理解 完整 的 应 用 架构 。 
我 添加 了 一 些 额外 的 功能 来 更 好 的 管理 数据 ， 例 如 分 页 ， 本 地 存储 。 但 是 没有 100% 的 完成 。 
这 些 代码 片 是 给 你 示范 如 何 整 合 功 能 到 你 的 ionic app。 


提醒 : 这 不 是 一 个 产品 级 的 app， 但 是 可 以 作为 制作 产品 级 的 开端 。 


书店 应 用 的 梁 构 


以 下 是 所 有 参与 创建 书店 应 用 的 组 件 的 高 级 视图 。 
EXPRESSJS 


REST API LOGIC 


AUTHORIZATION LOGIN/ 


FOR DATA ENDPOINTS REGISTER 


NODEJS 








IONIC FRAMEWORK CONTROLLERS 





服务 端 架构 
本 应 用 使 用 的 加 密 REST 服 务 用 的 上 Node.js/Express。 数 据 持 久 层 使 用 的 是 MongoDB 。 


应 用 中 使 用 的 数据 是 用 Faker 脚 本 生成 的 ，Faker 脚 本 : 
https://www.npmjs.com/package/faker 。 本 应 用 中 的 数据 都 是 假 的 ， 仅 可 以 用 作 应 用 原 
型 ， 卉 满 空白 处 。 所 有 图 片 和 文本 都 是 随机 的 。 


鉴于 本 书 的 目的 是 介绍 lonic， 所 以 我 不 会 讲解 如 何 搭建 服务 端 


可 以 参考 博客 介绍 服务 端的 帖子 ， 了 解 如 何 设置 ，JWT 是 如 何 工作 的 。 参考 搭建 一 个 加 
密 REST 风 格 的 Node.js 应 用 
我 搭建 了 两 个 相同 实现 的 应 用 ， 一 个 是 我 使 用 Node.js 作 为 服务 端的 Bucket 列 表 应 用 ， 另 一 个 
是 我 使 用 Firebase 作 为 服务 端的 同样 的 应 用 。 更 多 信息 可 以 参考 : 
1. lonic Restify MongoDB : 端 对 端 混合 应 用 : http://thejackalofjavascript.com/an-end-to- 


end-hybrid-app/ 
2. 创建 一 个 搭载 Firebase 的 端 对 端 lonic 应 用 : http://www.sitepoint.com/creating-firebase- 


服 


powered-end-endionic-application/ 


4 3S APIS AS 


我 提供 了 Bookstore REST API 的 文档 ， 其 中 你 可 以 查看 所 有 的 终端 API， 理 解 每 个 路 由 所 需 的 
输入 数据 ， 将 会 返回 何 种 数据 ， 可 能 会 有 哪些 异常 会 发 生 。 


文档 在 此 处 查看 : https://ionic-bookstore.herokuapp.com/ 


€ 


C O nttps//Aionic-book-store.herokuapp.com/*api-Books-GetA/IlBooks 


API FOR BOOK STORE 


USER 


User Login 


User Registration 


View Cart 
Add to cart 
PURCHASES 


View Purchases 
Checkout Cart 





Books - Gets Books 


This end point returns all the books 


CET 


/api/vl1/books/: page/:perPage 


Permission: none 
Example usage: Response (success): Resp 


curl https://ionic-book-store.herokuapg 


Parameter 


Field Descript 


page Numbe The page 


perPage Numbe Number 


Success 200 


Field Descrip! 


error Jbje The erro 
count 


data 


文档 的 扩展 性 不 强 ， 但 是 详尽 ， 简 单 易 用 。 


主页 ，Home (查看 所 有 书籍 ) 


登录 Login (4& 


查看 某 本 书 
添加 购物 车 
查看 购物 车 
查看 订单 我 们 将 需要 以 下 控制 器 : 


AppCtrl : 


Ri FRB 85 d 


签 组 件 ) /注册 Register (标签 组 件 ) 


| (管理 认证 ) 


e BrowseCtrl : 用 来 展示 所 有 的 书籍 

e BookCtrl : 用 来 显示 某 本 书 的 详细 信息 

e CartCtrl : 用 来 显示 购物 车 

e PuerchasesCtrl : 用 来 显示 订单 我 们 将 要 用 到 4 组 工厂 : 一 组 管理 lonic 加 载 ， 一 组 管理 本 
地 存储 (localStorage) ， 一 组 管理 认证 ， 一 组 管理 数据 。 

e Loader : 管理 lonic 加 载 

e LSFactory : 管理 本 地 存储 

e AuthFactory : 管理 认证 

e TokenFacroty : 管理 每 个 HTTP 请 求 的 token 

e BooksFactory : 用 来 获取 所 有 书籍 

e UserFactory : 用 户 的 登录 ， 注 册 以 及 购物 车 ， 订 单 的 API 


Github 上 的 代码 


服务 端 和 客户 端的 代码 都 上 传 到 Github 了。 建议 检 出 代码 至 本 机 。 我 会 添加 更 新 以 及 修复 读 
者 反馈 的 任何 bug 。 
同时 鼓励 读者 在 发 现任 何 问题 的 时 候 发 起 jssue， 我 将 尽力 完成 : 


e Bookstore lonic Client Repository 
e Bookstore Node.js Server Repository 


书店 demo 
这 个 书店 app 将 使 用 侧 边 菜单 模板 来 搭建 。 搭 建 本 应 用 我 们 还 会 用 到 标签 页 ，modal， 加 载 ， 
卡片 ， 列 表 以 及 栅 格 系统 。 


在 开始 之 前 ， 可 以 提前 预览 一 下 我 们 将 要 搭建 的 app 的 效果 : https://ionic-book- 
store.herokuapp.com/app 


6.1 理解 端 对 端 应 用 架构 


应 用 加 载 需要 些 时 间 ， 但 是 加 载 完成 之 后 ， 就 可 以 看 到 以 下 效果 : 


€ > QC B® https:/Aonic-book-store.herokuapp.com/app 


lonic Book Store Demo 


eos vero reiciendis 


illum quis eius offici 
**** 


ducimus unde rer... 


aspernatur hic non 
»** 


soluta vero iusto 


aut voluptatem nece.. 
ooo 


consequatur est r... 


iure debitis sint ut fa... 
KK 





这 是 我 们 将 要 制作 的 应 用 的 一 个 实时 演示 demo。 可 以 随便 点 点 看 看 其 他 页 面 的 效果 ， 例 如 菜 
单 ， 例 如 购物 车 。 当 你 在 添加 购物 车 ， 或 者 访问 购物 车 或 者 访问 订单 的 时 候 ， 将 会 要 求 你 进 
行 注 册 或 者 登录 。 你 可 以 创建 一 个 帐号 进行 测试 。 

顶部 有 一 个 分 辨 率 条 供 你 调整 查看 应 用 中 不 同 分 辨 率 下 面 的 效果 。 


注意 ， 此 处 展示 的 数据 都 是 随机 的 假 数 据 ， 仅 供 原型 开发 之 用 。 
开发 流 
本 章 中 ， 我 们 不 会 一 个 接 一 个 的 去 开发 功能 ， 在 完成 一 个 之 后 再 开发 下 一 个 。 我 们 会 一 次 性 
完成 整个 app 的 开发 ， 然 后 查看 输出 效果 。 如 果 你 在 开发 某 功 能 的 时 候 有 不 懂 的 ， 想 要 知道 


最 终 会 是 什么 样子 ， 那 么 我 强烈 建议 你 检 出 实时 版 本 的 代码 ， 也 就 是 这 个 版 本 : https:Wionic- 
book-store.herokuapp.com/app 
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6.1 理解 端 对 端 应 用 架构 
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鉴于 设置 服务 器 不 是 本 书 以 及 本 应 用 的 重点 部 分 ， 以 下 提供 两 个 方法 来 完成 他 : 


1. 使 用 已 有 的 REST APl， 也 就 是 俺 建 的 
2. 制作 服务 端 代码 分 支 ， 设 置 DB， 本 机 运行 服务 器 


对 于 第 一 个 选项 ， 可 以 参考 文档 查看 可 用 的 REST API 。 

对 于 方法 2， 我 们 将 使 用 以 下 操作 : 

从 https://github.com/arvindr21 下 载 服务 端 源 代码 并 解压 。 如 果 你 熟悉 Node.js 的 话 ， 那 么 你 
就 会 发 现 这 一 个 典型 的 Express 应 用 ， 其 中 使 用 了 JWT 中 间 件 。 

数据 库 方面 ， 你 可 以 使 用 本 机 的 MongoDB， 也 可 以 使 用 免费 的 

MongoLab (https://mongolab.com/) 。 对 于 本 应 用 你 也 可 以 用 我 的 MongoLab。 记 住 ， 别 人 
也 在 使 用 这 个 URL。 

决定 了 连接 方式 之 后 ， 打 开 server/db/connection.js， 更 新 第 2 行 的 连接 ; 例如 


var db = mongojs('ionicbookstoreapp', ['users', 'books']); 


接 下 来 ， 在 ob 文件 夹 里 面 打 开 终 端 /命令 行 ， 运 行 如 下 命令 来 生成 一 些 测 斌 数据 : 


node dbscript.js 


这 个 脚本 会 帮 你 生成 30 本 书 以 用 在 应 用 中 。 


如 果 你 使 用 的 是 MongoLab URL 的 话 ， 你 就 不 用 运行 如 上 命令 去 生成 书籍 了 。 因 为 
MongoLab 已 有 这 些 数据 了 。 


最 后 ， 使 用 cd 命令 进入 server 然 后 运行 如 下 命令 : 


node server.js 


这 个 命令 将 在 3000 端 口上 运行 服务 ， 然 后 你 就 可 以 通过 http;//localhost:3000 来 访问 应 用 了 。 


当 你 导航 到 http//localhost:3000 的 发 生 错误 的 时 候 ， 不 要 惊慌 。 这 是 一 个 API 服 务 器 ; 
因此 主页 上 没有 任何 UI 的 。 


打开 htto://ocalhost:3000/api/v1/books/1/10 你 会 看 到 浏览 器 打印 出 来 10 本 书 的 JSON 数 据 。 
这 意味 这 你 的 服务 器 搭建 成 功 了 。 

再 次 声明 ， 如 果 你 对 DIY (Do It Yourself 自 做 ) 的 方式 不 适应 的 话 ， 你 可 以 直接 使 用 已 有 的 
REST 终 端 服务 。 我 将 给 你 展示 使 用 已 有 服务 主机 是 多 人 么 的 简单 ， 不 用 管 REST API 服 务 器 在 
哪里 。 


6.2 在 本 机 设置 服务 器 
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搭建 应 用 


现在 ， 我 们 已 经 搭建 好 了 服务 器 ， 并 且 对 我 们 将 要 制作 的 东西 有 了 一 个 初步 的 想法 ， 那 么 我 
们 现在 就 可 以 开始 了 。 执行 以 下 步骤 就 可 以 轻松 的 搭建 好 这 个 app 了 : 


搭建 侧 边 菜单 模板 

， 重 构 此 模板 

创建 认证 ， 本 地 存储 以 及 REST API 工 厂 
.为 每 个 路 由 制作 控制 器 ， 然 后 将 它们 整合 到 对 应 的 工厂 
创建 模板 并 整合 控制 器 数据 


aR WN 一 


第 一 步 - 搭建 侧 边 菜单 模板 


第 一 件 要 做 的 事情 就 是 搭建 侧 边 菜单 模板 。 新 建 一 个 文件 夹 名 为 chapter6。 在 chapter6 文 件 夹 
内 打开 终端 /命令 行 f 


ionic start -a "Ionic Book Store" -i app.bookstore.ionic book-store sidemenu 


这 条 命令 将 会 创建 好 一 个 侧 边 菜单 模板 应 用 。 我 们 的 应 用 不 会 自 定义 主题 ， 所 以 不 会 设置 


- 重 构 模板 


到 目前 为 止 的 所 有 范例 中 ， 我 们 都 只 是 使 用 部 分 组 件 。 但 是 在 本 例 中 ， 我 们 将 重 构 整 个 模 
板 。 
在 继续 进行 ， 我 们 先 确认 一 下 一 切 是 否 正常 。 使 用 cd 命令 进入 到 book-store LŽ > R 


ionic serve 


这 样 ，app 就 运行 起 来 了 。 之 前 在 第 二 章 欢迎 使 用 /omic 提 到 过 ， 打 开 开 发 工具 ， 调 整 其 位 置 
到 页 面 的 右边 部 分 。 效 果 图 如 下 : 


c localhost:.8100/f/app/playlists 


Q [ Elements Network Sources Timeline » > € a 


Left 

© w <top frame> X Preserve log 
Login 
Search 


Browse 


Playlists 





HRS 


第 一 个 需要 重 构 的 是 菜单 。 我 们 将 使 用 需要 用 到 的 条 目 来 替换 默认 的 条 目 。 
打开 www/templates/menu.html， 如 下 赫 换 左边 的 jon-side-menu 部 分 : 


«ion-side-menu side="left"> 
«ion-header-bar class="bar-assertive"> 
«hi class="title">Menu</h1> 
</ion-header -bar> 
<ion-content> 
<ion-list> 
<ion-item menu-close href="#/app/browse"> 
Browse Books 
</ion-item> 
<ion-item menu-close href="#/app/cart"> 
My Cart 
</ion-item> 
<ion-item menu-close href="#/app/purchases"> 
My Purchases 
</ion-item> 
<ion-item menu-close ng-show="isAuthenticated" ng-click="logout()"> 
Logout 
</ion-item> 
«ion-item menu-close ng-hide="isAuthenticated" ng-click="loginFromMenu( )"> 
Login 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-side-menu> 


RAT AI 14433 aq 


e Browse books : 浏览 所 有 书籍 

e My cart : 浏览 购物 车 

e My purchases : 浏览 我 的 购物 清单 

e Login/Logout : 根据 用 户 授权 状态 条 件 展 示 的 菜单 


接 下 来 ， 我 们 将 更 新 menu.html 的 页 头 或 者 说 ion-side-menu-content 部 分 : 


<ion-side-menu-content> 
<ion-nav-bar class="bar-assertive"> 
<ion-nav-back-button> 
</ion-nav-back-button> 
«ion-nav-buttons side="left"> 
<button class="button button-icon button-clear 
ion-navicon" menu-toggle="left"> 
</button> 
</ion-nav-buttons> 
<ion-nav-buttons side="right"> 
<!-- «button ng-show-"isAuthenticated" class="button button-icon button-clear io 
n-unlocked" ng-click-z"logout()"» 
«/button» --» 
<a class="button button-icon button-clear ionandroid-cart" href="#/app/cart"> 
«/a» 
«/ion-nav-buttons» 
«/ion-nav-bar» 
«ion-nav-view name="menuContent"></ion-nav-view> 
«/ion-side-menu-content» 


我 们 将 页 头 的 主题 修改 为 成 assertive 心 情 。 同 时 ， 我 们 也 在 右边 添加 了 两 个 按钮 。 一 个 是 登 
出 ， 这 个 按钮 注释 掉 了 ， 另 一 个 是 购物 车 。 这 些 代码 教会 你 如 何 给 应 用 的 页 头 添 加 图 标 。 


同时 也 需要 注意 到 登 出 图 标 是 一 个 条 件 显示 图 标 。 只 有 当 用 户 在 授权 的 状态 下 才 显 示 。 
由 于 我 不 想 再 页 头 右边 出 现 两 个 按钮 ， 所 以 我 把 它 注释 掉 了 。 


I] tt 1% ion-side-menu + 49 enable-menu-with-back-views & 13€ E A true » AA EIJE > TR 
CIE EM EE 单 图 标 。 
当 你 保存 文件 ， 返 回 浏览 器 的 时 候 ， 将 会 看 到 如 下 结果 : 


localhost:8 100/#/app/playlists localhost:8100/#/app/playlists 


Playlists 


Reggae Browse Books Reggae 


Chill My Cart Chill 


Dubstep My Purchases Dubstep 


Indie Login Indie 


Rap Rap 


Cowbell Cowbell 





重 构 模 组 名 


接 下 来 ， 我 们 将 要 给 模 组 重 命名 。 默 认 开 始 模 板 的 模 组 名 叫做 starter。 我 们 会 将 他 重 命名 
为 BookStoreApp。 需 要 更 改 的 位 置 有 : 


e Www/index.html 里 面 的 ng-app 指 令 的 名 字 改 为 BookStoreApp 

e 打开 Www/js/app.js， 将 angular 模 组 改 成 这 样 : angular.module('BookStoreApp', 
['ionic', BookStoreApp.controllers']) 

e iT? www/js/controller.js > € 3f starter.controllers 7; BookStoreApp.controllers 这 样 就 完成 
了 模 组 的 重 命名 。 从 现在 开始 ， 在 app 中 我 们 就 可 以 是 使 用 BookStoreApp 作 为 模 组 的 命 
名 空间 了 。 


添加 run 方 法 ， 修 改 路 由 


接着 ， 我 们 将 进行 路 由 的 配置 ; 打开 Www/js/app.js。 删 除 当 中 的 config 部 分 。 接 下 来 ， 我 们 
将 设置 [un 方法 来 持 有 一 些 工具 方法 。 在 www/js/app.js 添 加 以 下 代码 : 


.run(['$rootScope', 'AuthFactory',function($rootScope, , AuthFactory) { 
$rootScope.isAuthenticated - AuthFactory.isLoggedIn(); 


// utility method to convert number to an array of elements 
$rootScope.getNumber = function(num) { 
return new Array(num); 


} 
1) 


可 以 给 一 个 模 组 添加 多 个 run 方法 


如 果 你 还 记得 我 们 在 mmenu.htm/ 添 加 的 根据 /SAuthenticatea 条 件 显示 的 登录 和 登 出 按钮 的 

话 ，jsAuthenticateqd 属 性 就 是 在 此 处 初始 化 的 。 我 们 也 有 一 个 工具 方法 名 为 getNumber。 这 
个 方法 是 用 来 以 传 入 的 参数 作为 长 度 生 成 一 个 数组 的 。 

接 下 来 ， 我 们 将 添加 路 由 。 在 run 之 下 ， 添 加 如 下 config 代 码 : 


.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function($stateProvi 
der, $urlRouterProvider, $httpProvider) { 

// setup the token interceptor 

$httpProvider.interceptors.push( 'TokenInterceptor'); 


$stateProvider 
.state('app', { 
url: "/app", 
abstract: true, 
templateUrl: "templates/menu.html", 
controller: 'AppCtrl' 
3) 
.state('app.browse', { 
url: "/browse", 
views: { 
'menuContent': ( 
templateUrl: "templates/browse.html", 
controller: 'BrowseCtrl' 


15) 
.state('app.book', { 


url: "/book/:bookId", 
views: { 
'menuContent': { 
templateUrl: "templates/book.html", 
controller: 'BookCtrl' 


13) 
.state('app.cart', { 


url: "/cart", 
views: { 


'menuContent': { 
templateUrl: "templates/cart.html", 
controller: 'CartCtrl' 
} 
} 
}) 
.State('app.purchases', { 
url: "/purchases", 
views: { 
'menuContent': { 
templateUrl: "templates/purchases.html", 
controller: 'PurchasesCtrl' 


} 
3); 
// if none of the above states are matched, use this as the fallback 
$urlRouterProvider.otherwise('/app/browse'); 


虽然 我 们 可 以 手动 编辑 路 由 ， 但 是 我 认为 这 样 展示 更 简单 。 同 时 ， 如 果 你 的 lonic 服 务 一 
直 在 运行 的 时 候 ， 你 应 该 会 在 浏览 器 的 JavaScript 控 制 台 看 到 错误 输出 : 找 不 到 依赖 库 。 
在 所 有 代码 完成 之 前 ，app 都 不 会 正常 工作 。 可 以 在 所 有 代码 完成 之 前 关闭 服务 器 。 


config 里 面 我 们 添加 的 第 一 个 是 Tokenlnterceptor。 当 我 们 在 使 用 认证 工厂 的 时 候 ， 我 们 会 实 
现 Tokenlnterceptor。 在 使 用 Tokenlnterceptor 的 时 候 ， 我 会 寻 回 此 处 。 
我 们 添加 了 以 下 这 些 路 由 : 


e Japp: 这 是 用 来 管理 应 用 主 视图 的 一 个 抽象 路 由 

e [browse : 这 是 应 用 的 主页 ， 用 来 列 出 所 有 书籍 

e /book/:bookld : 展示 某 本 书 的 详情 

e [purchase : 展示 用 户 过 往 的 订购 记录 。 登录 和 注册 标签 界面 将 会 是 一 个 modal 而 不 是 一 
个 route。 


重 构 模板 


我 们 可 以 根据 路 由 配置 一 次 重 构 一 个 模板 ， 或 者 为 了 便利 起 见 ， 我 们 可 以 (或 者 说 将 要 ) Ml 
除 www/templates 里 面 除了 menu.htm| 之 外 的 所 有 模板 ， 然 后 添加 一 些 空白 的 HTML 文 件 。 
删除 除了 menu.htm| 之 外 的 所 有 模板 之 后 ， 我 们 创建 以 下 几 个 模板 : 


e browse.html 

e book.html 

cart.html 

e purchases.html 

login.html 目前 可 以 将 以 上 这 些 模 板 都 留 空 。 最 后 我 们 才 会 用 到 这 些 模板 。 


第 三 步 - 创建 认证 ， 本 地 存储 和 REST API 工 厂 


在 www/js 文 件 夹 内 ， 创 建 一 个 文件 名 为 factoryjs。 然 后 在 www/index.html 的 controllerjs 的 引 
用 后 面 添加 : 


<script src="js/factory.js"></script> 


这 个 文件 将 用 来 持 有 所 有 的 工厂 。 当 然 ， 如 果 你 喜欢 的 话 你 也 可 以 给 每 个 功能 添加 一 个 工厂 
文件 。 但 是 咱们 的 范例 里 面 所 有 工厂 都 在 一 个 文件 里 。 

文件 第 一 行 要 添加 的 是 REST API 的 基本 URL。 这 个 URL 可 以 指向 你 的 本 地 服务 器 也 可 以 指向 
Heroku 上 的 已 有 REST API 地 址 。 如 下 : 


//Nar base = 'http://localhost:3000'; 
var base = 'https://ionic-book-store.herokuapp.com'; 


可 以 根据 需求 来 注释 其 中 一 行 。 

接 下 来 创建 一 个 新 的 模 组 名 为 BookSitoreApp./actory 来 持 有 所 有 的 工厂 定义 。 
angular.module('BookStoreApp.factory', []) 

然后 在 主 模 组 BookStoreApp 中 将 此 模 组 添加 为 依赖 。 打 开 www/js/app.js > $31 
BookSitoreApp 如 下 : 

angular.module('BookStoreApp', ['ionic', BookStoreApp.controllers', 
'BookStoreApp.factory']) 


lonic loading 工矿 


第 一 个 制作 的 工厂 是 加 载 工厂 。 在 AngularJS 模 组 定义 下 ， 添 加 如 下 : 


.factory('Loader', ['$ionicLoading', '$timeout', function($ionicLoading, $timeout) { 
var LOADERAPI = ( 
showLoading: function(text) { 
text = text || 'Loading...'; 
$ionicLoading.show( { 
template: text 
1) 


hideLoading: function() ( 
$ionicLoading.hide(); 


}, 


toggleLoadingwithMessage: function(text, timeout) { 
$rootScope.showLoading(text); 


$timeout(function() { 
$rootScope.hideLoading(); 
}, timeout || 3000); 


3 
return LOADERAPI; 
3D 
我 们 有 以 下 三 个 方法 来 帮助 我 们 展示 ， 隐 藏 和 切换 加 载 : 


e showLoading : 显示 一 个 带 文本 或 者 Loading 的 阻 断 modal 

e hideLoading : 隐藏 使 用 showLoading 显 示 的 modal 

。 toggleLoadingWithMessage : 使 用 提供 的 信息 显示 modal， 并 且 在 提供 的 超时 或 者 默认 
的 3 秒 后 隐藏 。 这 个 方法 将 用 来 展示 自动 隐藏 的 阻 断 信息 。 


localStorage--/- 


接 下 来 我 们 要 添加 /ocalStorage 工 厂 。 在 Loader 工 厂 之 前 ， 添 加 如 下 : 


.factory('LSFactory', [function() { 
var LSAPI = { 
clear: function() { 
return localStorage.clear(); 


F 


get: function(key) { 
return JSON.parse(localStorage.getItem(key)); 


Lh 


set: function(key, data) { 
return localStorage.setItem(key, JSON.stringify(data)); 
Lh 


delete: function(key) { 
return localStorage.removeItem(key); 


Hh 


getAll: function() { 
var books - []; 
var items - Object.keys(localStorage); 
for (var i = 0; i « items.length; i++) { 


if (items[i] !== 'user' || items[i] != 'token') { 
books.push(JSON.parse(localStorage[items[i]])); 
} 
} 
return books; 
} 
J; 
return LSAPI; 


31) 


这 个 工厂 提供 了 我 们 和 HTML5 localStorage 交互 的 API。 我 们 将 使 用 本 地 存储 来 保存 所 有 书 
籍 。 这 样 一 来 ， 我 们 不 需要 每 次 获取 书籍 的 时 候 都 调用 服务 端 接口 。 

由 于 这 是 个 范例 而 已 ， 我 们 就 不 会 在 后 台 检查 新 书籍 然后 更 新 本 地 缓存 。 

loacalStorage 的 clear, getltem,setltemhe deleteltem 方 法 分 别 封装 成 了 clear，get，set 和 
delete。 由 于 我 们 需要 将 对 象 存放 到 本 地 存储 ， 而 本 地 存储 之 支持 字符 串 ， 所 以 我 们 在 存 数 
据 之 前 将 对 象 字符 串 话 ， 在 取出 来 之 后 对 象 化 。 

getAl/ 方 法 将 用 来 获取 我 们 在 /localStorage 中 存放 的 所 有 书籍 。 


注意 我 们 使 用 了 Object.keys 来 将 localStorage (类 数组 ) 转换 成 一 个 数组 。 更 多 信息 关 
于 Object.keys 请 参考 : https://developer.mozilla.org/en- 
US/docs/Web/JavaScript/Reference/Global Objects/Object/keys 


认证 工厂 


下 一 个 进行 的 是 Authentication (认证 ) 工厂 。 在 LSFactory 定 义 后 面 添加 以 下 代码 : 


.factory('AuthFactory', ['LSFactory', function(LSFactory) { 
var userKey - 'user'; 
var tokenKey - 'token'; 
var AuthAPI - ( 
isLoggedIn: function() { 
return this.getUser() --- null ? false : true; 


}, 


getUser: function() { 
return LSFactory.get(userKey); 


Lh 


setUser: function(user) { 
return LSFactory.set(userKey, user); 


Lh 


getToken: function() { 
return LSFactory.get(tokenKey); 
}, 


setToken: function(token) { 
return LSFactory.set(tokenKey, token); 
u 
deleteAuth: function() { 
LSFactory.delete(userKey); 
LSFactory.delete(tokenKey); 
} 
}; 
return AuthAPI; 
}]) 


此 工厂 依赖 LSFactory， 用 来 管理 用 户 认证 数据 。 就 像 之 前 说 的 那样 ， 当 用 户 注 册 或 者 登录 的 
时 候 ， 服 务 端 在 返回 用 户 数据 的 同时 附带 了 访问 token。 这 些 封装 好 了 的 方法 通过 LSFactory 
的 API 保 存 用 户 数 据 和 token 到 本 地 存储 。 

接 下 来 ， 我 们 将 创建 TJokenlnterceptor 工 厂 。 如 果 你 还 记得 的 话 ， 我 们 之 前 在 www/js/app.js 的 
config 部 分 中 已 经 添加 了 Tokenlnterceptor 的 引用 。 我 们 告诉 AngularJS 在 他 每 次 发 起 HTTP 请 
3&8 Bt 4& 38 7] TokenInterceptor ° 


什么 是 拦截 器 (Interceptors) ? 当 使 用 ghttp 服 务 发 起 AJAX 请 求 的 时 候 ， 我 们 的 app 
里 面 有 些 时 候 需 要 在 发 起 HTTP 请 求 之 前 添加 一 些 额外 的 数据 。AngularJS 中 这 种 用 途 
的 代码 就 叫做 拦截 器 。 将 拦截 器 添加 到 $httpProvider 的 语法 是 这 样 的 : 
$httpProvider.interceptors.push('MylInterceptor'); * 在 设置 好 名 为 Mylnterceptor 的 工厂 或 
者 服务 之 后 ， 可 以 参考 此 处 获取 更 多 拦截 器 和 他 的 工作 流程 的 信息 : 
http://www.webdeveasy.com/interceptors-in-angularjs-anduseful-examples/ 


当 调 用 此 方法 的 时 候 ， 他 会 检查 /ocalStorage 中 是 否 有 用 户 数据 和 用 户 token。 如 果 有 的 话 他 
会 将 这 些 数据 添加 到 请 求 头 里 面 。 如 果 你 还 DNE ， 添加 购物 车 ， 查 看 购物 车 ， 检 出 ， 以 
及 查看 订单 路 由 都 需要 用 户 认 证 。token 是 服务 端 知 道 用 户 是 否认 证 成 功 是 有 授权 浏览 相关 内 


容 的 唯一 途径 。 


在 www/js/factoryjs 的 AuthFactory 的 下 面 ， 添 加 Tokenlnterceptor 工 厂 的 代码 如 下 : 


.factory('TokenInterceptor', ['$q', 'AuthFactory', function($q, AuthFactory) { 


return { 
request: function(config) { 
config.headers = config.headers || {}; 
var token = AuthFactory.getToken(); 
var user - AuthFactory.getUser(); 


if (token && user) { 
config.headers['X-Access-Token'] - token.token; 
config.headers['X-Key'] - user.email; 
config.headers['Content-Type'] - 
"application/json"; 


j 
return config || $q.when(config); 

3 

response: function(response) { 
return response || $q.when(response); 

} 

J; 
}]) 
REST API 工 广 


接 下 来 ， 我 们 要 创建 两 个 工厂 。 一 个 用 作 与 REST API 服 务 终端 交互 ， 
据 ， 另 一 个 工厂 用 作 与 REST API 服 务 终 端 交互 ， 需 要 认证 。 这 只 是 
个 工厂 里 面 操作 。 

$$ —^- x BookFactory » Xv 4 — Aget} ix 5 2- #4 api/v1/books?t 35 


.factory('BooksFactory', ['$http', function($http) { 
var perPage = 30; 
var API = { 
get: function(page) { 


无 需 认 证 就 可 以 拿 到 数 
SEHD Ae TUE 


对 话 : 


return $http.get(base + '/api/vi/books/' + page + '/' + perPage); 


} 
J; 
return API; 
3D 


api/v1/books REST 终端 服务 有 数据 分 页 的 能 力 。 你 可 以 发 送 perPage 和 page 数 字 ; 这 样 他 将 
会 发 挥 对 应 的 记录 。 你 可 以 使 用 这 个 API 来 请 求 分 页 数据 ， 然 后 更 具 需 求 加 载 书籍 。 

但 是 ， 在 本 应 用 中 ， 我 们 只 请 求 1 次 ， 返 回 30 条 记录 。 你 可 以 实现 一 个 /on-injpjite-scroljl 根 据 需 
求 加 载 书籍 作为 练习 。 

接 下 来 是 UserFactory。 这 个 工厂 是 由 /ogin，registerREST 终 端 以 及 其 他 4 个 购物 车 和 订购 相 
关 的 API 组 成 。 

在 BooksFactory 的 后 面 添加 UserFactory 的 相关 定义 : 


.factory('UserFactory', ['$http', 'AuthFactory', 
function($http, AuthFactory) { 
var UserAPI - ( 
login: function(user) { 
return $http.post(base + '/login', user); 


i 


register: function(user) { 
return $http.post(base + '/register', user); 


3 


logout: function() { 
AuthFactory.deleteAuth(); 


i 


getCartItems: function() { 
var userId = AuthFactory.getUser(). id; 
return $http.get(base + '/api/vi/users/' + userId + '/cart'); 


}, 


addToCart: function(book) { 
var userId = AuthFactory.getUser(). id; 
return $http.post(base + '/api/vi/users/' + userId + '/cart', book); 


3 


getPurchases: function() { 
var userId - AuthFactory.getUser(). id; 
return $http.get(base + '/api/vi/users/' + userId + '/purchases'); 


i 


addPurchase: function(cart) { 
var userId = AuthFactory.getUser(). id; 
return $http.post(base + '/api/vi/users/' + userId + '/purchases', car 


t); 


n 


return UserAPI; 


1) 


getCartltems > addToCart > getPurchasesfe addPurchase È t&  REST# AZ BY SAM 
localStorage 里 面 获取 用 户 ID。REST 终 端 服 务 需 要 的 也 是 这 样 的 URL 。 

完成 这 些 之 后 ， 我 们 成 功 的 加 入 了 工厂 方法 来 管理 数据 ， 认 证 以 及 REST 交 互 。 在 处 理 相 关 控 
制 器 的 时 候 ， 我 们 会 讲解 每 个 REST 终 端的 响应 。 

如 果 你 的 服务 器 还 在 运行 并 且 你 正确 的 做 完 所 有 事情 的 话 ， 你 应 该 会 看 到 一 个 关于 
BrowserCtr| 的 错误 。 这 样 就 是 对 的 ， 我 们 接 下 来 就 处 理 控制 器 了 。 


第 四 步 - 给 每 个 路 由 创建 控制 器 并 将 其 整合 到 工厂 


现在 ， 我 们 工厂 配置 好 ， 我 们 就 要 创建 所 需 的 控制 器 了 。 再 一 次 ， 为 了 简单 起 见 ， 我 们 删 掉 
1 www/js/controller.js €. © 5 AppCtrl * PlaylistsCtrl > fe PlayListCtrl * AAT : 
angular.module('BookStoreApp.controllers', []) ° 


应 用 控制 器 


T eus 3 是 应 用 控制 器 或 者 AppCtr1。 这 个 控制 器 用 来 管理 登录 和 注册 功能 。 
果 其 他 子 控制 器 (例如 购物 车 控制 器 ) 想 要 强制 用 户 登 录 ， 在 处 理 请 求 之 前 ， 这 个 控制 
会 在 scope 内 广 - 揪 一 个 showLoginModal， 然 后 showLoginModal 的 监听 器 将 会 负责 管理 登录 和 
注册 流程 。 一 旦 用 户 登 录 成 功 ， 将 会 通知 购物 车 控制 器 继续 操作 。 

我 们 将 利用 gon 和 $broadcast 来 触发 自 定义 事件 ， 例 如 : showLoginModal 。 

我 们 将 在 www/js/controllerjs 的 模 组 定义 后 面 添 加 AppCtrli。 为 更 好 的 解释 此 代码 ， 我 们 

将 AppCtr/ 代 码 分 离 成 两 部 分 

首先 ， 添 加 定义 与 所 有 需要 的 依赖 : 


.controller('AppCtrl', ['$rootScope', '$ionicModal','AuthFactory', '$location', 'UserF 
actory', '$scope', 'Loader', 

function($rootScope, $ionicModal, AuthFactory, $location,UserFactory, $scope, Loader) 
{ 

i1) 


接 下 来 ， 在 root scope ( 根 范围 ) 内 注册 showLoginModal 事 件 。 如 下 : 


$rootScope.$on('showLoginModal', function($event, scope, cancelCallback, callback) { 
$scope.user - ( 


email: '', 
password: '' 
$scope = scope || $scope; 


$scope.viewLogin = true; 
$ionicModal.fromTemplateUrl('templates/login.html', { 
scope: $scope 
}).then(function(modal) { 
$scope.modal = modal; 
$scope.modal.show(); 
$scope.switchTab = function(tab) { 


if (tab === 'login') { 
$scope.viewLogin = true; 
) else { 


$scope.viewLogin - false; 


J 


3); 


$scope.hide = function() { 
$scope.modal.hide(); 
if (typeof cancelCallback === 'function') { 
cancelCallback(); 


} 
$scope.login = function() { 
Loader .showLoading( 'Authenticating...'); 
UserFactory.login($scope.user).success(function(data) { 
data = data.data; 
AuthFactory.setUser(data.user); 
AuthFactory.setToken({ 
token: data.token, 
expires: data.expires 
1); 
$rootScope.isAuthenticated - true; 
$scope.modal.hide(); 
Loader .hideLoading(); 


if (typeof callback === 'function') { 
callback(); 


}).error(function(err, statusCode) { 
Loader .hideLoading(); 
Loader . toggleLoadingwithMessage(err.message) ; 
3); 
} 


$scope.register = function() { 
Loader.showLoading('Registering...'); 
UserFactory.register($scope.user). 
success(function(data) { 
data - data.data; 
AuthFactory.setUser(data.user); 
AuthFactory.setToken({ 
token: data.token, 
expires: data.expires 
3; 
$rootScope.isAuthenticated - true; 
Loader.hideLoading(); 
$scope.modal.hide(); 
if (typeof callback === 'function') { 
callback(); 
} 
}).error(function(err, statusCode) { 
Loader .hideLoading(); 
Loader . toggleLoadingwithMessage(err.message) ; 


3) 


接 下 来 ， 在 $rootScope 属 性 上 加 上 两 个 方法 。 这 两 个 方法 将 在 sidqemenu 中 调用 : 


$rootScope.loginFromMenu = function() { 
$rootScope.$broadcast('showLoginModal', $scope, null, null); 


$rootScope.logout = function() { 
UserFactory.logout(); 
$rootScope.isAuthenticated = false; 
$location.path('/app/browse'); 
Loader .toggleLoadingwithMessage('Successfully Logged Out!', 2000); 


showLoginModaH 5:3 4 #4 : 


e scope : modal 会 在 哪个 scope 里 面 创建 。 如 果 没 有 提供 scope 的 话 ， 就 会 使 用 AppCtrl。 
e cacelCallback : 当 用 户 取消 登录 或 者 注册 流程 的 时 候 执行 的 回调 函数 。 
e callback : 注册 或 者 登录 成 功 之 后 的 回调 函数 。 


在 login.html 文件 里 面 ， 我 们 使 用 SionicModal 服务 创建 了 一 个 modal。 我 们 将 在 下 面 的 部 分 
使 用 这 个 模板 。 

login 和 register 方法 负责 与 UserFactory 里 面 对 应 的 login 和 register 方法 对 话 。 当 用 户 登 寻 
或 者 注册 成 功 的 时 候 ， 服 务 端 返回 的 结果 看 起 来 应 该 是 这 样子 的 : 


"error": null, 
"data": ( 

"token": "eyJOeXAiOiJKV1QiLCJhbGciOiJIUZzIA1NiJ9.eyJleHAiOjEO 
MzM1Mj IwNzQAMzYsInVzZXIiOnsiX21kI1joiNTU20DU5NjgyN2Z2j Y2JjMTZkN jAAMzBi 
IiwizwihawwiOiJhQGEuY29tliwibmFtZSIG6ImEiLCJjYXJOIjpbeyJpZCI6IjU1NjgzY 
2QA4ZmJiMmUXxOTIOZjEAYTRlIYSIsInFOeSI6MXi1dLCJwdXJjaGFzZXMiOlt711BicmNoYX 
Nl1IGihZGUgb24gMjktTWFS5LTIwMTUgYXQgMTC6NTAiOlt7ImlkIjoiNTU2ODNjZDhmYmIi 
yZTE5MjRmMThhNGUAIiwicXR5IjoxfV19LHsiUHVyY2hhc2UgbWFkZSBVbiAyOSA1NYXkt 
MjAxNSBhdCAXNzo10SI6W3siaWQiOil1NTYA4M2NkOGZiYj JlMTKkyNGYXOGEOZWIiLCJxd 
HkiOjF9LHsiaWQiOili1NTYAM2NKkOGZiY;j JlMTKyNGYXxOGE0Z j YÀLCJxdHki0j F9LHsiaW 
QiOil1NTYAM2NKkOGZiYj JlMTKyNGYXOGEOZ j gàLC JxdHki0OjF9XX0sey JQdXJ j aGFzZSB 
tYWRIIG9UuIDISLU1heSOyMDE1IGFOIDIWOjUXIjpbeyJpZCI61jU1NjgzY2QA4ZmJiMmUx 
OTIOZjEAYTRIOCISInFOeSIG6MXOseyJpZCI61jU1NjgzY2Q4ZmJiMmUXOTIOZjEAYTRlY 
SIsInFOeSI6MXOseyJpZCI61jU1NjgzY2Q4ZmJiMmUXOTIOZjEAYTRlIZSISInFOeSI6MX 
1dfVi19fQ.JOUOBZXhP6C1VWEHDT18BMOzkK dvXP-xdGUiIr7-z8", 

"expires": 1433522074836, 


"user": { 
" id": "5568596827fccbc16d60830b", 
"email": "a@a.com", 
"name": "a", 
} 
}, 
"message": "Success" 


我 们 从 响应 数据 中 提取 token 和 user 对象 ， 然 后 使 用 AuthFactory 的 setUser 和 setToken 方 法 
将 它们 设 入 /localStorage。Tokenlnterceptor 将 在 进行 REST 调 用 之 前 在 其 中 读 取 数据 附加 到 请 
求 中 。 

loginFromMenu 和 logout 是 由 菜单 条 目 Login/Logout 发 起 调用 的 。loginFromMenu 所 做 的 只 
是 广播 showLoginModal 来 处 理 用 户 认 证 。 

logout 方 法 调用 UserFactory 的 登录 方法 ， 此 方法 用 来 清理 /ocalStorage 中 的 用 户 数 据 和 

token » 同时 他 也 会 重 置 jsAuthenticated 属 性 ， 并 将 用 户 重 定向 到 /app/browse 页 面 。 


浏览 控制 器 (browse controller) 


接 下 来 需要 处 理 的 是 BrowseCtr1。 这 个 控制 器 负责 在 用 户 启动 应 用 的 时 候 展 示 所 有 书 
籍 。BrowseCtrl 在 首次 和 REST API 终 端 服务 成 功 拿 取 数据 之 后 将 它们 存放 到 localStorage 
中 。 此 后 ， 每 次 调用 之 前 ， 都 会 在 localStorage 查 找 ， 节 约 电池 ， 节 省 流量 。 


作为 练习 ， 实 现 一 个 后 合 程序 用 最 新 的 书籍 来 更 新 /ocalStorage 


.controller('BrowseCtrl', ['$scope', 'BooksFactory', 'LSFactory','Loader', function($s 
cope, BooksFactory, LSFactory, Loader) ( 
Loader .showLoading(); 
// support for pagination 
var page - 1; 
$scope.books - []; 
var books = LSFactory.getAll(); 
// if books exists in localStorage, use that instead of making a call 
if (books.length > 0) { 
$scope.books = books; 
Loader .hideLoading(); 
) else { 
BooksFactory.get(page).success(function(data) { 
// process books and store them 
// in localStorage so we can work with them later on, 
// when the user is offline 
processBooks(data.data.books); 
$scope.books - data.data.books; 
$scope.$broadcast('scroll.infiniteScrollComplete' ); 
Loader .hideLoading(); 
}).error(function(err, statusCode) { 
Loader .hideLoading(); 
Loader . toggleLoadingwithMessage(err.message) ; 


3): 
} 


function processBooks(books) { 
LSFactory.clear(); 
// we want to save each book individually 
// this way we can access each book info. by it's id 
for (var i = 0; i « books.length; i++) { 
LSFactory.set(books[i]. id, books[i]); 
}; 


} 
1) 


鉴于 咱们 REST API 支 持 分 页 ， 我 们 需要 传 $c Ue 置 好 的 perPage 来 获 
取 分 页 数据 。 我 将 页 数 动态 化 ， 你 可 以 根据 需求 和 分 页 加 载 书籍 
但 是 本 范例 中 我 们 将 一 次 加 载 所 有 的 30 本 书 。 


书籍 控制 器 (book controller ) 


用 户 浏 览 了 所 有 书籍 然后 想 要 查看 某 特定 书籍 的 详情 的 时 候 ， 他 将 点 击 书籍 。 此 时 ， 我 们 将 
用 户 重 定向 到 /book 页 ， & 这 里 将 会 触发 BookCtr1。 BookCtr/ 将 在 localStorage 中 查找 指定 id 的 
书籍 然后 展示 他 的 详情 。 

t www/js/controllers.js*'] BrowseCtrl/& t 7» _£ BookCtrl 8 : 


.controller('BookCtrl', ['$scope', '$state', 'LSFactory', 'AuthFactory', '$rootScope', 
'UserFactory', 'Loader', 
function($scope, $state, LSFactory, AuthFactory, $rootScope, UserFactory, Loader) { 
var bookId = $state.params.bookId; 
$scope.book - LSFactory.get(bookId); 
$scope.$on('addToCart', function() { 
Loader.showLoading('Adding to Cart..'); 
UserFactory.addToCart({ 
id: bookId, 
qty: 1 
}).success(function(data) { 
Loader .hideLoading(); 
Loader . toggleLoadingwithMessage( 'Successfully 
added ' + $scope.book.title + ' to your cart', 2000); 
}).error(function(err, statusCode) { 
Loader .hideLoading(); 
Loader . toggleLoadingwithMessage(err.message) ; 
3); 
3); 
$scope.addToCart = function() { 
if (!AuthFactory.isLoggedIn()) { 
$rootScope.$broadcast('showLoginModal', $scope, null, function() { 
// user is now logged in 
$scope.$broadcast('addToCart'); 
p 
return; 
} 
$scope.$broadcast('addToCart'); 


} 
1) 


我 们 使 用 LSFactory.get(booklqd) 从 localStorage 中 获取 书籍 。 

查看 demo 的 时 候 ， 你 会 发 现在 书籍 详情 页 面 上 有 一 个 Add to Cart (添加 到 购物 车 ) 的 按 

钮 。 添 加 到 购物 车 的 逻辑 非常 简单 。 用 户 在 点 击 Add to Cart 的 时 候 ， 我 们 检查 用 户 时 候 已 经 
登录 。 如 果 没 有 ， 我 们 广播 一 个 showLoginModal 事 件 ， 和 尔后 在 用 户 登 录 成 功 之 后 广播 
addToCart 事 件 ， 这 样 就 可 以 将 当前 展示 的 书籍 添加 到 购物 车 。 

如 果 用 户 已 经 登录 ， 那 么 直接 广播 aqqToCat。 

addToCart 事 件 创建 了 一 个 对 象 ， 含 有 bookid 和 数量 属性 ( 硬 编码 到 1) ， 然 后 调 

用 UserFactory.aqddToCart 方 法 。 这 个 方法 负责 添加 书籍 到 购物 车 。 


购物 车 控制 器 (cart controller) 


接 下 来 就 是 购物 车 控制 器 了 。 这 个 控制 器 是 在 用 户 点 击 页 头 的 购物 车 图 标 或 者 点 击 侧 边 菜单 
的 购物 车 按钮 的 时 候 调 用 i o 

当 用 户 点 击 购物 车 的 时 候 ， 我 们 会 检查 用 户 是 否 是 登录 状态 。 如 果 用 户 是 登录 状态 ， 我 们 将 
获取 用 户 购物 车 条 目 并 展示 给 用 户 看 。 如 果 没 有 登录 的 话 就 广播 showLoginModal， 这 个 事件 


负责 处 理 认证 。 如 果 用 户 取消 登录 modal， 我 们 会 将 用 户 带 回 /app/browse。 

当 用 户 认证 成 功 或 者 登录 成 功 的 时 候 ， 我 们 将 广播 getCart 事 件 。 此 事件 将 调 

用 UserFactory.getCartltems 方 法 获取 所 有 的 购物 车 条 目 。 获 取 成 功 之 后 ， 我 们 会 将 他 们 赋值 
给 gscope 的 booKks 属 性 。 

在 BooKkC 妇 后 面 添加 CatC 妇 代码 : 


.controller('CartCtrl', ['$scope', 'AuthFactory', '$rootScope', '$location', '$timeout' 


, 


'UserFactory', 'Loader', 
function($scope, AuthFactory, $rootScope, $location, $timeout,UserFactory, Loader) { 
$scope.$on('getCart', function() { 
Loader.showLoading('Fetching Your Cart..'); 
UserFactory.getCartItems().success(function(data) { 
$scope.books = data.data; 
Loader .hideLoading(); 
}).error(function(err, statusCode) { 
Loader .hideLoading(); 
Loader . toggleLoadingwithMessage(err.message) ; 
3); 
3); 
if (!AuthFactory.isLoggedIn()) { 
$rootScope.$broadcast('showLoginModal', $scope, function() 
{ 
// cancel auth callback 
$timeout(function() { 
$location.path('/app/browse' ); 
), 200); 
3}, function() { 
// user is now logged in 
$scope.$broadcast('getCart'); 
3); 
return, 
} 
$scope.$broadcast('getCart'); 
$scope.checkout = function() { 
// we need to send only the id and qty 
var cart = $scope.books; 
var cart = []; 
for (var i = 0; i < _cart.length; i++) { 
cart.push({ 
id: _cart[i]._id, 
qty: 1 // hardcoded to 1 
i) 
}; 
Loader.showLoading('Checking out..'); 
UserFactory.addPurchase(cart).success(function(data) { 
Loader .hideLoading(); 
Loader.toggleLoadingWithMessage('Successfully checked out', 2000); 
$scope.books - []; 
}).error(function(err, statusCode) { 
Loader .hideLoading(); 
Loader . toggleLoadingwithMessage(err.message) ; 


3); 


我 们 在 $scope 上 添加 了 checkout 方 法 。 当 用 户 查看 他 的 购物 车 的 时 候 ， 他 们 可 以 检 出 购物 
车 ， 此 方法 会 调用 UserFactory.addPurchase 方 法 ， 并 传 入 cart 数 组 。cart 数 组 是 由 添加 到 购 
物 的 书籍 的 jd 和 quantity 组 成 的 对 象 所 组 成 的 。 


订购 控制 器 (purchase controller) 


BE 


咱们 应 用 的 最 后 一 个 控制 器 是 订购 控制 器 。 这 个 控制 器 展示 了 当前 登入 用 户 的 订购 清单 。 跟 
购物 车 控制 器 一 样 ， 我 们 要 先 检 查 用 户 是 否 已 经 登录 之 后 才能 继续 。 一 旦 用 户 登 录 成 功 之 
后 ， 我 们 广播 getPurchases 事 件 。 这 个 事件 将 负责 与 UserFactory.getPurchases 方 法 联络 ， 获 
取 订 购 清单 : 


ga 
Fa. 


.controller('PurchasesCtrl', ['$scope', '$rootScope','AuthFactory', 'UserFactory', '$t 
imeout', 'Loader', 
function($scope, $rootScope, AuthFactory, UserFactory,$timeout, Loader) { 
// http://forum.ionicframework.com/t/expandable-list-inionic/3297/2 
$scope.groups - []; 


$scope.toggleGroup = function(group) { 
if ($scope.isGroupShown(group)) { 
$scope.shownGroup - null; 
} else { 
$scope.shownGroup = group; 


F; 


$scope.isGroupShown = function(group) { 
return $scope.shownGroup === group; 


F; 


$scope.$on('getPurchases', function() { 
Loader.showLoading('Fetching Your Purchases'); 
UserFactory.getPurchases().success(function(data) { 
var purchases - data.data; 
$scope.purchases - []; 
for (var i = 0; i < purchases.length; i++) { 
var key - Object.keys(purchases[i]); 
$scope.purchases.push(key[0]); 
$scope.groups[i] = { 
name: key[0], 
items: purchases[i] [key] 
} 
var sum = 0; 
for (var j = 0; j < purchases[i][key].length; j++) ( 
sum += 
parseint(purchases[i][key][j]. price); 
}; 
$scope.groups[i].total = sum; 


}; 


Loader.hideLoading(); 
}).error(function(err, statusCode) { 
Loader .hideLoading(); 
Loader . toggleLoadingwithMessage(err.message) ; 
3; 
1; 


if (!AuthFactory.isLoggedIn()) { 
$rootScope.$broadcast('showLoginModal', $scope, 
$timeout(function() { 
$location.path('/app/browse'); 
}, 200); 
3}, function() { 
// user is now logged in 
$scope.$broadcast('getPurchases'); 


3; 
return; 
} 
$scope.$broadcast('getPurchases'); 
} 
]) 


function() { 


我 们 添加 了 两 个 方法 ，toggleGroup 和 isGroupShown。 这 两 个 方法 将 在 我 们 建立 模块 的 时 候 
调用 。 一 旦 响应 返回 的 时 候 ， 我 们 将 格式 化 这 些 数据 ， 这 样 他 就 可 以 被 组 成 一 个 内 瞪 列 表 。 


建议 在 继续 学 习 之 前 检 出 此 app 的 在 线 版 本 以 查看 订购 功能 。 这 样 你 就 可 以 理解 此 部 分 代 


码 做 了 些 什么 。 


第 五 步 - 创建 模板 并 使 用 控制 器 数据 进行 整合 


现在 我 们 的 控制 器 准备 好 了 数据 ， 那 么 我 们 将 创建 模板 来 展示 这 些 数据 。 


登录 模板 
第 一 个 是 登录 模板 ， login.html : 


<ion-modal-view> 
<div class="tabs-striped tabs-background-assertive tabs-colorlight"> 
<div class="tabs"> 
«a class="tab-item" ng-class="{active : viewLogin}" hrefz"javascript:" ng-clic 
k="switchTab('login')"> 
<i class="icon ion-locked"></i> Login 
</a> 
<a class-"tab-item" ng-class="{active : !viewLoginj" href="javascript:" ng-cli 
ck="switchTab('register')"> 
<i class="icon ion-person-add"></i> Register 


</a> 
</div> 
</div> 
<!-- login pane --> 


«ion-pane ng-show="viewLogin"> 
<ion-header -bar> 
<h1 class="title">Login</h1> 
<div class="buttons"> 
<button class="button button-assertive" ng-click="hide()">Close</butto 


n> 
</div> 
</ion-header -bar> 
<ion-content> 
<form> 
<div class="list"> 
<label class="item item-input"> 
«span class="input-label">Email</span> 
<input type="email" ng-model="user.email"> 
</label> 
<label class="item item-input"> 
«span class="input-label">Password</span> 
<input type="password" ng-model="user.password"> 
</label> 
<label class="item"> 
«button class="button button-block buttonassertive" ng-click=" 
login()" ng-disabled="!user.email || !user.password" type="Submit">Log in</button> 
</label> 
</div> 


</form> 
</ion-content> 


«/ion-pane» 
<!-- register pane --> 
«ion-pane ng-hide="viewLogin"> 
<ion-header -bar> 
<h1 class="title">Register</hi> 
<div class="buttons"> 
«button class="button button-assertive" ng-click="hide()">Close</butto 


n> 
</div> 
</ion-header -bar> 
<ion-content> 
<form> 
«div class="list"> 
<label class="item item-input"> 
«span class="input -label">Name</span> 
<input type="text" ng-model="user .name"> 
</label> 
<label class="item item-input"> 
<span class="input-label">Email Address </span> 
<input type="text" ng-model="user.email"> 
</label> 
<label class="item item-input"> 
«span class="input -label">Password</span> 
<input type="password" ng-model="user.password"> 
</label> 
<label class="item"> 
«button class="button button-block buttonassertive" ng-click=" 
register()" ng-disabled="!user.name || !user.email || !user.password" type="submit" ty 
pe="submit">Register</button> 
</label> 
</div> 


</form> 
</ion-content> 
</ion-pane> 
</ion-modal-view> 


login 模板 有 一 个 用 在 Login 和 Register 视图 之 间 切 换 的 标签 组 件 。 这 个 tabs 组 件 不 是 一 个 
lonic tab 指 令 ， 而 是 一 个 普通 的 Tab CSS 组 件 。 点 击 标签 图 标的 时 候 ， 我 们 将 使 用 switchTab 
方法 来 切换 viewLogin 为 true 或 者 false 以 在 Login 和 Register 视图 之 问 进行 切换 。 


完整 的 登录 模板 视图 效果 如 下 (也 可 以 点 击 Register 图 标 来 查看 注册 视图 ) 


o localhost:8 100/#/app/browse E localhost:8 100/#/app/browse 


Login E Register E 


Email Address Name 
Password Email Address 


Password 





We 


浏览 模板 (Browse template) 


接 下 来 进行 的 是 Browse 模板 。 这 个 模板 将 用 来 展示 书籍 列表 。 打 开 
www/templates/browse.html 更 新 内 容 为 如 下 : 


«ion-view view-title="Browse Books" hide-back-button="true"> 
<ion-content> 
<ion-list> 
<div ng-repeat="book in books track by $index" class="row responsive-sm" n 
g-if="$index % 2 == 0"> 
<ion-item class="col-50" ng-repeat="i in [$index, $index + 1]" ng-if=" 
books[i] != null" ng-href="#/app/book/{{: :books[i]._id}}"> 
<div class="item-thumbnail-left"> 
«img ng-src="{{:: book. image}}"> 
<h2>{{::books[i].title}}</h2> 
<p>{{::books[i].short_description}}</p> 
<p> 
<i class="icon ion-star" ng-repeat="i in getNumber(books[i 
].rating) track by $index"></i> 
</p> 
</div> 
</ion-item> 
</div> 
</ion-list> 
</ion-content> 
</ion-view> 


之 前 的 模板 中 ， 我 是 用 {property} RFA © {{:property}} 是 AngularJS 中 单 向 数据 绑 定 
的 方法 。 当 模板 中 使 用 的 属性 的 值 在 初始 绑 定 之 后 后 续 不 会 进行 更 改 的 时 候 ， 单 向 数据 
绑 定 是 再 理想 不 过 的 了 这 个 应 用 就 使 用 单 向 数据 绑 定 就 非常 完美 。 值 绑 定 到 模板 之 后 ， 
我 们 就 不 会 在 更 新 他 了 。 这 样 一 来 我 们 可 以 节省 AngularJS 对 我 们 变量 循环 诊断 的 消耗 
f» 更 多 关于 单 向 数据 绑 定 的 信息 请 参 

考 : http://blog.thoughtram.io/angularjs/2014/10/14/exploring-angular-1.3-onetime- 
bindings.html 


在 此 模板 中 ， 我 们 使 用 了 ion-list 来 展示 书籍 列表 。 我 早先 也 描述 了 如 何 使 用 lonic 的 格子 系统 
来 实现 。 


在 之 前 的 模板 中 ， 我 们 显示 了 两 行书 籍 ， 只 是 视窗 是 一 个 移动 设备 。 我 们 使 用 两 个 循环 实现 
了 格子 视图 。 外 层 循 环 组 成 类 名 为 item 的 元 素 ， 内 层 循 环 组 成 他 的 条 目 ， 类 名 为 col-50 


同时 ， 我 们 给 外 部 循环 添加 了 类 responsive-sm 以 高 速 lonic 格 子 系统 ， 如 果 设 备 比 较 小 ， 那 
么 就 泻 染 为 以 列 就 可 以 了 。 


移动 视窗 的 泻 染 效果 如 下 : 


6.4 测试 


localhost:8100/#/app/browse 


Browse Books 


eos vero reiciendis 
illum quis eius officia debitis 


do 6 * 


ducimus unde rerum 
aspernatur hic non dolorum 
** 


soluta vero iusto 
aut voluptatem necessitat 


KKK 





桌面 版 是 这 样 的 : 


64 localhost:8100/#/app/browse 
Browse Books 
eos vero reiciendis ducimus unde rerum 


illum quis eius officia debitis aspernatur hic non dolorum placeat 


KK ** 


soluta vero iusto . consequatur est rerum 
aut voluptatem necessitatibus ure debitis sint ut facilis eos atque d.. 
ce sve slve f kkk 


sunt nesciunt et laboriosam ratione blanditiis 
aliquam et sequi culpa possimus ist... voluptas vitae cupiditate ut maxime 
kkk ke 





书籍 模板 (Book template) 
当 用 户 在 浏览 模板 里 面 点 击 书籍 以 查看 详情 的 时 候 ， 我 们 会 重 定 向 到 /book 页 。 在 此 处 我 们 


展示 了 书籍 的 详细 信息 并 带 有 一 个 Add to Cart 按钮 。 以 下 是 www/templates/book.html 的 
源 代 码 : 
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«ion-view view-title="{{::book.title}}" hide-back-button="true"> 
<ion-content> 
<div class="list card"> 
«div class="item item-avatar"> 
<img ng-src="{{::book.author_image}}"> 
<h2>{{::book.title}}</h2> 
<p>{{::book.release_date | date: 'yyyy-MM-dd'}}</p> 
<p>{{::book.author}}</p> 
</div> 
<div class="item item-body"> 
<img class="full-image" ng-src="{{: :book.image}}"> 
<p> 
{{::book.long_description}} 
</p> 
<p class="row"> 
<label class="col"> 
Rating : <i class="icon ion-star" ngrepeat="i in getNumber(book.ra 
ting) track by $index"></i> 
</label> 
<label class="col"> 
Price : 
«label class="subdued">{{::book.price currency}} $</label> 


</label> 
</p> 
<button class="button button-assertive buttonblock" ng-click="addToCar 
t()"> 
<i class="icon ion-checkmark"></i> Add to Cart 
</button> 
</div> 


</div> 
</ion-content> 


</ion-view> 


模板 中 需要 提 及 的 是 新 增 的 Rating 部 分 ， 此 处 使 用 了 一 个 ng-repeat 根据 评分 值 来 动态 打印 
星星 。 我 们 用 到 了 之 前 在 run 方法 里 面 定 义 的 getNumber 方法 。 


泻 染 好 的 数据 模板 效果 如 下 : 


6.4 测试 


C | localhost:8100/#/app/book/55694262ee79b 


nihil distinctio iusto 


nihil distinctio iusto 
2015-05-29 
Tressa Beatty DDS 


eaque nemo rerum ut iste rerum sapiente dolor quia 
molestiae ducimus quas soluta ex accusantium nihil 
jure quasi incidunt similique et nam nulla sint omnis 
adipisci quisquam aut quia consequatur sunt ut rerum 
aliquam maiores quis quos 


Rating : ** Price : $135.00 


J Add to Cart 





购物 车 模板 (Cart template) 


购物 车 模板 跟 Browse 模板 很 想 ， 除 了 在 顶部 添加 了 一 个 检 出 (checkout) 按钮 以 及 在 购物 
车 没有 条 目的 时 候 的 一 个 倒 回 信息 (fall back message) ° www/templates/cart.html 源 代码 
如 下 : 
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«ion-view view-title-"Your Cart" cache-view-"false" hide-backbutton="true"> 
<ion-content> 
<div class="padding"> 
<button class="button button-block button-dark" ngshow="books.length > 0" 
ng-click="checkout()"> 
<i class="icon ion-checkmark"></i> Checkout Cart 
</button> 
</div> 
<ion-list> 
<div ng-repeat="book in books track by $index" class="row responsive-sm" n 
g-if-"$index % 2 == 0"> 
«ion-item class="col-50" ng-repeat-"i in [$index, $index + 1]" ng-if=" 
books[i] != null" ng-href="#/app/book/{{: :books[i]._id}}"> 
<div class="item-thumbnail-left"> 
<img ng-src="{{::book.image}}"> 
<h2>{{::books[i].title}}</h2> 
<p>{{::books[i].short_description}}</p> 
<p>{{::books[i].price}} $</p> 
<p> 
<i class="icon ion-star" ng-repeat-"i 
in getNumber(books[i].rating) track by $index"></i> 
</p> 
</div> 
</ion-item> 
</div> 
</ion-list> 
<div class="card" ng-show="books.length == 0"> 
<div class="item item-text-wrap text-center"> 
<h2>No Books in your cart!</h2> 
<br> 
«a href="#/app/browse">Add a few</a> 
</div> 
</div> 
</ion-content> 


</ion-view> 


泻 染 后 效果 如 下 : 


localhost:8 1 00/#/app/cart 


Your Cart 


Jf Checkout Cart 


qui necessitatibus quas 

vel laboriosam doloremque vero... 
$239.00 

KKK 


quas et laborum 

rerum voluptatem qui a aspernat 
$123.00 

kkk 





订购 模板 
最 后 一 个 模板 是 订购 模板 。 (终于 1 ! 脖子 快要 断 了 ! ! ! ) 为 了 让 显示 方法 有 所 变化 ， 我 


使 用 了 一 个 谨 入 列表 展示 订购 列表 ， 而 不 是 用 一 个 主 详情 页 。 主 详情 偏向 于 在 本 页 上 列 出 所 
有 的 订购 信息 ; 当 用 户 点 击 的 时 候 ， 我 们 将 用 户 带 到 另 一 个 页 面 以 显示 订购 详情 。 (与 
Browse 和 Book 页 面 的 关系 一 样 ) 


这 样 ， 所 有 订购 信息 都 根据 订购 时 间 进 行 分 组 ， 然 后 作为 第 一 级 列表 显示 。 当 用 户 点 击 组 头 
的 时 候 ， 我 们 显示 此 组 内 的 订购 书籍 列表 


这 是 一 个 Accordion 组 件 。 更 多 信息 参考 : 


http://forum.ionicframework.com/t/expandable-list-in-ionic/3297/2 


打开 www/templates/purchases.html 更 新 如 下 : 


N 
O 


«ion-view view-title-"Your Purchases" cache-view-"false" hide-back-button="true"> 
<ion-content> 
<ion-list> 
«div ng-repeat="group in groups"> 
<ion-item class="item-stable" ngclick="toggleGroup(group)" ng-class="{active: 
isGroupShown( group) }"> 
<p><i class="icon" ngclass="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"> 
</i> {{::group.name}} 
«span class="badge badgepositive">{{::group.items. length}}</span></p> 
<p>You paid : {{::group.total | currency}}</p> 
</ion-item> 
«ion-item class="item-accordion" ng-repeat="item in group.items" ng-show="isGr 
oupShown( group)" ng-href="#/app/book/{{::item._id}}"> 
<div class="item-thumbnail-left"> 
<img ng-src="{{::item.image}}"> 
<h2>{{::item.title}}</h2> 
<p>{{::item.short_description}}</p> 
<p> 
<i class="icon ion-star" ng-repeat="i in getNumber(item.rating) track by 
$index"></i> 
</p> 
</div> 
</ion-item> 
</div> 
</ion-list> 
</ion-content> 


</ion-view> 


保存 文件 然后 返回 浏览 器 ， 你 将 看 到 : 


Sy localhost:8 100/#/app/purchases 


Your Purchases 


— Purchase made on 26-June-2015 at 12:2 
You paid : $389.00 


et culpa deserunt 
labore voluptatem aut veniam con 


** 


nihil distinctio iusto 


sit incidunt quia recusandae 


** 


十 Purchase made on 26-June-2015 at 12:3 


You paid : $561.00 





好 了 ， 最 后 一 击 : 添加 一 些 样式 。 更 新 www/css/styles.css 如 下 : 


.item-thumbnail-left, 
.item-thumbnail-left .item-content { 
min-height: 75px; 
} 
.ion-android-cart:before { 
font-size: 24px !important; 
} 
.item-thumbnail-left > img:first-child, 
.item-thumbnail-left .item-image, 
.item-thumbnail-left .item-content » img:first-child, 
.item-thumbnail-left .item-content .item-image { 
top: 27px; 
left: 16px; 
padding-bottom: 10px; 
} 
.badge.badge-positive { 
position: absolute; 


right: 5px; 
} 
“2 
总 结 


NO 


本 章 中 ， 我 们 学 习 了 如 何 利 用 已 有 的 REST API 创 建 一 个 lonic 应 用 。 我 们 也 学 习 了 如 何 使 用 基 
于 token 的 服务 器 和 处 理 需要 认证 的 路 由 对 比 不 需要 认证 的 路 由 。 这 个 手打 范例 帮助 你 巩固 了 
已 有 的 lonic 只 是 。 


下 一 章 中 ， 我 们 将 要 学 习 Cordova 插 件 ， 以 及 如 何 使 用 ngCordova。 


A 


第 七 草 Cordova ngCordova 


本 章 中 ， 我 们 将 学 习 整 合 设备 特别 功能 到 lonic 应 用 中 ， 例 如 : 网 络 ， 电 池 状 态 ， 摄 像 头 等 
等 。 首 先 我 们 将 学 习 Cordova 插 件 ， 然 后 学 习 ngCordova ° 
本 章 涵 盖 范 围 : 


e 设 定 一 个 特定 平台 的 SDK 
e 使 用 Cordova 插件 AP 

e 使 用 ngCordova 

e 测试 一 些 ngCordova 插 件 


设 定 特定 平台 SDK 


在 与 设备 功能 交互 之 前 ， 我 们 需要 在 本 机 设置 设备 的 操作 系统 对 应 的 SDK。lonic 只 正式 支持 
iOS,Android 以 及 部 分 Windows phont 平 台 的 扩展 。 但 是 ，lonic 还 是 可 以 用 在 任何 设备 上 。 
以 下 链接 展示 了 如 何在 本 机 上 设置 移动 SDK。 很 可 惜 的 是 本 章 不 会 进行 更 多 的 设置 。 链 接 如 
"T: 


e Android : 
http://cordova.apache.org/docs/en/5.0.0/guide platforms android index.md.htmlzzZAndro 
id%20Platform%20Guide 

e jiOS:http://cordova.apache.org/docs/en/5.0.0/guide_platforms_ios_index.md.html#iOS% 
20Platform%20Guide 

e Windows Phone® : 
http://cordova.apache.org/docs/en/5.0.0/guide_platforms_wp8_index.md.html#Windows 
%20Phone%208%20Platform%20Guide 

对 于 其 他 OS， 参 考 : 
http://cordova.apache.org/docs/en/5.0.0/guide platforms index.md.htmlZPlatform 
%20Guides ; 我 使 用 的 是 Cordova 5.0.0 94 X44 


本 书 中 只 对 Android 与 iDOS 进 行 设置 。 其 他 操作 系统 也 是 类 似 的 。 
在 继续 操作 之 前 ， 我 们 需要 确保 设置 完成 ， 并 且 工 作 正 常 。 


关于 本 章 ， 你 也 可 以 通过 以 下 Github 目 录 来 访问 源 代码 ， 发 起 issue， 与 作者 沟通 : 
https://github.com/learning-ionic/Chapter-7 


Android 平 侣 设置 


确保 安装 A T Android 的 SDK 以 及 Android tools 在 你 的 环境 变量 path 中 。 然 后 ， 在 任何 地 方 打 
开 命 令 行 /终端 ， 运 行 : 


android 


这 个 命令 将 启动 Android SDK 管 理 器 。 先 确保 你 安装 了 最 新 版 本 的 Android， 或 者 某 个 特定 的 
版 本 。 
接 下 来 ， 运 行 如 下 命令 : 


android avd 


这 个 命令 将 启动 Android Virtual Device 〈 安 卓 虚 拟 设 备 ) 管理 器 。 确 保 至 少 设置 了 一 个 AVD 。 
如 果 没 有 的 话 ， 点 击 上 面 的 Create 按 钮 创建 一 个 ， 如 下 : 
Create new Android Virtual Device (AVD) 
ionic-emulator 
Nexus 5 (4.95", 1080 x 1920: xxhdpi) 
Android 4.4.2 - API Level 19 
ARM (armeabi-v7a) 
网 Hardware keyboard present 


Skin with dynamic hardware controls 
Front Camera: 


Back Camera: 


Memory Options: 


Internal Storage: 


SD Card: 


Emulation Options: Snapshot 





OSF 47k E 


先 确 保安 装 好 了 Xcode 和 他 所 需 的 工具 ， 同 时 也 要 确保 全 局 安装 了 jos-sim 和 jos-deploy : 


npm install -g ios-sim 


npm install -g ios-deploy 


iOS 设 置 只 能 在 Apple 机 器 上 进行 。Windows 开 发 人 员 不 能 从 Windows 上 面部 署 iOS 
app， 因 为 Xcode 只 能 在 OS 上 使 用 。 


测试 设置 


我 们 看 一 下 如 何 测试 Android 和 iOS 的 设置 。 
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测试 Android 


为 测试 设置 是 否 成 功 ， 我 们 新 建 一 个 lonic 应 用 ， 然 后 使 用 Android 和 iOS 模 拟 器 进行 模拟 R 
们 将 新 建 一 个 标签 页 应 用 : 


ionic start -a "Example 27" -i app.example.twentyseven example27 tabs 


1& Fl cd u 43 Aexample27 XL fF KA > i843 : 


ionic serve 


这 样 ， 应 用 就 运行 起 来 了 。 我 们 就 可 以 通过 浏览 器 访问 此 应 用 了 。 

为 了 能 在 Android 模 拟 器 中 模拟 此 应 用 ， 首 先 我 们 需要 给 项 目 添 加 Android 平 台 支 持 ， 然 后 再 模 
拟 。 

添加 Android 支 持 ， 使 用 以 下 命令 


ionic platform add android 


ionic emulate android 


经 过 短暂 的 等 待 之 后 ， 我 们 可 以 看 到 模拟 器 启动 ，app 部 署 其 中 ， 并 且 在 其 中 运行 : 
5554:ionic-emulator 


44129 OY X. 


Dashboard 


2 


Recent Updates 


There is a fire in sector 3 


Health 


You ate an apple today! 


Upcoming 


You have 29 meetings on your calendar 
tomorrow 





如 果 你 之 前 用 过 Android 模 拟 器 的 话 ， 那 么 你 就 应 该 体会 到 他 有 多 慢 。 如 果 没 用 过 的 话 ， 那 么 
RE EAE HO AY FEAF TZ o 

3 — ^ FT 3&8 8j Android#® 4A & € Genymotion ( (https://www.genymotion.com) 。lonic 也 很 好 
£j £j Genymotion & + T » 

Genymotion 有 两 个 版 本 ， 一 个 免费 版 和 一 个 商业 版 。 免 费 版 功能 较 少 ， 仅 支持 个 人 使 用 。 


可 以 从 此 处 下 载 一 个 Genymotion 的 副本 : https://www.genymotion.com/#!/store 


& @ Configure virtual device 


OO Genymotion a Configuration 


System 
十 


Add Processor(s) 


Base Memory (MB) 


Your virtual devices EE UE 


B ionic-emulator @ Predefined 
720x1280 - 320dpi 


© Custom 


E HE EE ~ 
Caution: you may experience issues using custom 
values 
[C] Run virtual device in full-screen mode 


Android system options 


Show Android navigation bar 
C] Use virtual keyboard for text input 





接 下 来 我 们 就 可 以 启动 模拟 器 让 他 在 后 台 运 行 了 。 
现在 ， 我 们 的 Genymotion 模 拟 器 运行 起 来 了 ， 我 们 就 需要 告诉 lonic 使 用 Genymotion 而 不 是 
Android 默 认 的 模拟 器 了 ， 使 用 如 下 口令 : 


ionic run android 


替换 : 


ionic emulate android 


这 个 命令 将 会 把 app 部 署 到 Genymotion 模 拟 器 ， 并 且 与 Android 模 拟 器 不 同 的 是 ， 你 可 以 立刻 
看 到 效果 : 


Dashboard 


A 


Recent Updates 


There is a fire in sector 3 


Health 


You ate an apple today! 


Upcoming 


You have 29 meetings on your calendar 
tomorrow 





一 定 要 确保 Genymotion 在 后 台 运 行 。 
如 果 Genymotion 对 你 来 说 偏 贵 ， 那 么 你 也 可 以 简单 的 连接 你 的 Android 移 动 电话 到 你 的 笔记 本 
电脑 ， 然 后 运行 


ionic run android 


这 样 ，app 将 会 被 部 署 到 甚至 设备 上 去 。 


设置 Android USB 调 试 ， 请 参考 : http://developer.android.com/tools/device.html 之 前 截 
屏 里 的 Genymotion 是 一 个 私人 版 的 ， 因 为 我 没有 买 授权 。 开发 期 间 我 都 是 使 用 IOS 模 拟 
器 连接 我 的 Android 手 机 的 。 一 旦 完成 开发 ， 我 从 在 线 测试 服务 订购 设备 使 用 ， 然 后 在 上 
面 进行 测试 。 如 果 你 在 连接 Android 手 机 与 电脑 的 时 候 出 现 问 题 ， 请 先 检 查 一 下 时 候 可 以 


在 命令 行 /终端 里 面 运 — 且 命 令 可 以 列 出 你 的 设备 。 更 多 关于 Android Debug 
Bridge (ADB) 的 信息 ， 请 参考 : http://developer.android.com/tools/help/adb.html 


以 上 是 测试 Android app 的 不 同方 式 。 


测试 iOS 


7.1 设置 指定 平台 的 SDK 


要 测试 iOS， 首 先 要 添加 iOS 支 持 ， 然 后 进行 模拟 。 
运行 : 


ionic platform add ios 


RE: 


ionic emulate ios 


后 你 可 以 看 到 默认 模拟 器 运行 ， 最 后 app 出 现 了 : 


e iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... 
Carrier F 2:19 PM = 


Dashboard 


Recent Updates 


There is a fire in sector 3 


Health 


You ate an apple today! 


Upcoming 


You have 29 meetings on your calendar 
tomorrow. 


M 


Status 





可 以 使 用 以 下 命令 部 署 到 Apple 设 备 : 


ionic run ios 


深入 之 前 要 确保 你 可 以 模拟 app。 


227 


7.1 设置 指定 平台 的 SDK 
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7.2 使 用 Cordova 插 件 API 


名 词 参考 : 


e dot notation : 点 式 标 记 eg:org.apache.cordova.camera ， 
e hyphenated notation : 连 字 标 记 eg:org-apache-cordova-camera 


开始 使 用 Cordova 插 件 


参考 Cordova 文 档 : 


"Aplugin is a package of injected code that allows the Cordova web view within which 
the app renders to communicate with the native platform on which it runs. Plugins 
provide access to device and platform functionality that is ordinarily unavailable to web- 
based apps. All the main Cordova API features are implemented as plugins, and many 
others are available that enable features such as bar code scanners, NFC 
communication, or to tailor calendar interfaces." 插件 是 一 个 注入 包 ， 他 允许 泻 pp 
web view 与 他 运行 的 本 地 平台 进行 通讯 。 插件 提供 了 设备 和 平台 功能 的 访问 接口 ， 这 些 
是 网 页 应 用 访问 不 了 的 。 me E 也 有 一 些 其 他 可 用 的 接 
口 ， 例 如 二 维 码 扫描 ，NFC 通 讯 以 及 tailor calendar ° 


换 和 名 话说，Cordova 插 件 是 你 的 设备 功能 的 窗口 。Cordova/Phonegap 团 队 以 及 为 基本 上 所 有 
的 设备 功能 创建 了 可 用 的 插件 。 也 有 社区 贡献 的 插件 ， 他 们 自 定义 封装 了 很 多 设备 特定 的 功 
能 。 

可 以 在 此 处 查找 已 有 的 插件 : http://plugins.cordova.io/ 
在 本 章 教程 期 间 ， 我 们 将 探索 一 些 插件 。 


注意 Cordova 插 件 正在 迁移 到 NPM。 此 书 发 布 的 时 候 ; 所 有 的 Cordova 将 会 完成 到 NPM 
的 迁 6 Š 更 多 信息 息 ， 参 

考 : https://cordova.apache.org/announcements/2015/04/21/plugins-releaseand-move- 
to-npm.html 


为 调整 之 前 的 变更 ， 作 为 一 个 开发 人 员 你 这 边 不 需要 做 任何 变更 ， 除 了 使 用 Cordova CLI (版 
本 大 于 等 于 5.0.0) 来 添加 插件 。 这 样 将 会 从 合适 的 注册 点 下 载 对 应 的 插件 。 


lonic 团 队 已 经 合并 了 一 个 pull 请 求 : 将 dot notation 改 为 hyphenated notation » # 
考 : https://github.com/driftyco/ionic-cli/pull/409 


由 于 我 们 的 关注 点 是 lonic 开 发 ， 我 们 将 使 用 lonic CLI 来 添加 插件 。 他 本 身 就 是 调用 Cordova 
CLI 的 。 


Ilonic 插 件 API 
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在 使 用 插件 的 过 程 中 ， 主 要 有 4 个 用 到 的 命令 。 


添加 插件 
这 个 CLI 命 令 用 来 给 项 目 添加 一 个 新 的 插件 ， 例 如 
ionic plugin add org.apache.cordova.camera 
也 可 以 这 样 : 


ionic plugin add cordova-plugin-camera 


移 除 插件 


这 个 CLI 命 令 用 来 从 项 目 移 除 一 个 插件 的 ， 例 如 
ionic plugin rm org.apache.cordova.camera 
也 可 以 这 样 : 


ionic plugin rm cordova-plugin-camera 


列 出 添加 的 插件 
此 CLI 命 令 是 用 来 列 出 所 有 项 目 里 的 插件 的 ， 例 如 


ionic plugin 1s 


查找 插件 
此 CLI 命 令 是 用 在 命令 行 中 搜索 插件 的 ， 例 如 
ionic plugin search scanner barcode 
为 测试 以 上 命令 ， 新 建 一 个 项 目 然后 逐个 测试 一 下 : 


ionic start -a "Example 28" -i app.example.twentyeight example28 blank 


7.2 使 用 Cordova 插 件 API 


创建 空白 模板 的 时 候 ， 我 们 会 下 载 和 设置 一 下 几 个 插件 : 


e cordova-plugin-device 

e cordova-plugin-console 

e cordova-plugin-whitelist 

e cordova-plugin-splashscreen 
e com.ionic.keyboard 


使 用 cd 命令 进入 example28 文 件 夹 内 运行 如 下 命令 以 备 测试 : 


ionic serve 


我 们 先 来 搜索 电池 状态 插件 ， 然 后 将 他 添加 到 项 目 。 关 闭 服务 然后 运行 


ionic plugin search battery status 


编写 本 章 的 时 候 ， 看 到 的 是 如 下 的 结果 : 


+ example28 ionic plugin search battery status 

Updated the hooks directory to have execute permissions 

running cordova plugin search battery status 

npm http GET http://registry.cordova.io/-/all/since?stale-update after&s 
tartkey=1433066172224 

npm http 200 http://registry.cordova.io/-/all/since?stale=update_after&s 


tartkey=1433066172224 

com.blueshift.cordova.battery - Battery 
org.apache.cordova.battery-status - Cordova Battery Plugin 
+ example28 [i 





运行 此 命令 ， 有 可 能 只 找 得 到 hyphenated 版 本 ， 也 许 都 可 以 找 得 到 。 
根据 搜索 到 的 插件 名 字 ， 将 它 添加 到 项 目 中 。 
所 以 ， 在 我 们 案例 中 ， 我 将 运行 如 下 命令 以 将 电池 状态 的 插件 添加 到 项 目 : 


ionic plugin add org.apache.cordova.battery-status 
这 样 电池 状态 插件 (https://github.com/apache/cordovaplugin-battery-status ) 将 会 添加 到 当 


前 项 目 。 
此 时 ， 再 次 运行 上 面 的 命令 时 ， 将 会 看 到 : 
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7.2 使 用 Cordova 插 件 API 


 example28 ionic plugin add org.apache.cordova.battery-status 

Updated the hooks directory to have execute permissions 

running cordova plugin add org.apache.cordova.battery-status 

WARNING: org.apache.cordova.battery-status has been renamed to cordova-plugin-battery-status. You 
may not be getting the latest version! We suggest you “cordova plugin rm org.apache.cordova.batt 
ery-status' and 'cordova plugin add cordova-plugin-battery-status'. 

Fetching plugin "org.apache.cordova.battery-status" via cordova plugins registry 

npm http GET http://registry.cordova.io/org.apache.cordova.battery-status 

npm http 200 http://registry.cordova.io/org.apache.cordova.battery-status 

npm http GET http://cordova.iriscouch.com/registry/ design/app/ rewrite/org.apache.cordova.batter 
y-status/-/org.apache.cordova.battery-status-0.2.12.tgz 

npm http 200 http://cordova.iriscouch.com/registry/_design/app/_rewrite/org.apache.cordova.batter 
y-status/-/org.apache.cordova.battery-status-0.2.12.tgz 

Saving plugin to package.json file 

Adding since there was no existingPlugin 

+ example28 [i 





CLI 打 印 出 来 一 个 警告 告诉 你 插件 已 被 重 命名 ， 下 载 的 插件 可 能 不 是 最 新 的 。 
， 我 们 来 使 用 最 新 版 吧 。 但 是 ， 在 我 们 使 用 连 字 版 本 之 前 ， 我 们 需要 移 除 已 经 添加 插 
件 ， 如 下 : 


ionic plugin rm org.apache.cordova.battery-status 


添加 连 字 命 名 方式 的 插件 : 


cordova plugin add cordova-plugin-battery-status 


想 要 查看 我 们 安装 的 所 有 插件 的 话 ， 运 行 如 下 命令 : 


ionic plugin ls 


然后 你 会 看 到 以 下 : 


» example28 ionic plugin ls 

Updated the hooks directory to have execute permissions 
com. ionic.keyboard 1.0.4 "Keyboard" 
cordova-plugin-battery-status 1.1.0 "Battery" 


cordova-plugin-console 1.0.1 "Console" 
cordova-plugin-device 1.0.1 "Device" 
cordova-plugin-splashscreen 2.1.0 "Splashscreen" 
cordova-plugin-whitelist 1.0.0 "Whitelist" 





之 前 说 过 ，com.ionic.keyboard 是 用 的 连 字 标记 法 ， 其 他 的 都 是 用 的 点 式 标 记 法 。 当 你 运行 这 
个 命令 的 时 候 ， 应 该 只 能 看 到 连 字 命名 标记 。 

在 继续 测试 电池 状态 插件 之 前 ， 我 们 需要 在 代码 中 用 别 的 方式 来 使 用 。 打 开 www/js/app.js。 
在 run 方 法 里 ， 快 到 jonicPlatform.ready 回 调 的 地 方 ， 添 加 以 下 代码 : 
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alert(device.model); 
window.addEventListener("batterystatus", onBatteryStatus, false); 
function onBatteryStatus(info) { 

// Handle the online event 

alert("Level: " + info.level + " isPlugged: " + info.isPlugged); 


我 们 添加 了 一 个 警告 窗口 展示 设备 模型 (需要 用 到 coraova-plugin-aeveice 插 件 ) ， 然 后 添加 
了 一 个 电池 状态 变更 的 事件 监听 (需要 用 到 cordova-plugin-battery-status) ° 
此 时 ， 运 和 


ionic serve 


你 将 看 到 并 没有 警告 窗口 弹出 来 ， 然 后 ， 当 你 打开 开发 者 工具 的 时 候 ， 会 发 现 报错 了 : device 

is not defined 

这 是 因为 我 们 不 能 直接 在 浏览 器 中 运行 这 些 插件 ; 他 们 需要 一 些 环境 去 执行 ， 例 如 Android ， 

iOS， 或 者 是 他 本 身 (移动 系统 本 身 ) 的 浏览 器 。 

是 的 ， 浏 览 器 是 一 个 单独 的 平台 ， 像 Android ，iOS 一 样 ， 他 用 来 运行 cordova.js 。cordova.js 

c com pee e 缝隙 的 桥梁 。 根据 你 使 用 的 插件 的 类 型 的 不 同 ， 你 可 以 
选择 在 浏览 器 中 对 部 分 插件 进行 模拟 。 

我 们 用 这 个 来 试 试 设备 和 电池 功能 。 添 加 一 个 浏览 器 平台 : 


ionic platform add browser 


现在 在 浏览 器 平台 运行 此 app， 如 下 : 


ionic run browser 


7.2 使 用 Cordova 插 件 API 


此 时 将 启动 一 个 新 的 当前 默认 浏览 器 的 实例 ， 在 其 中 运行 此 app。 现 在 ， 就 可 以 看 
到 aevice./mode/ 的 警告 框 了 。 此 时 ， 打 开 开 发 者 工具 ， 可 以 看 到 : 


c file:///Chapter7/example28/platforms/browser/www/index.html 


QQ 日 Elements Network Sources Timeline Profiles » 01». $ AG, 
© y <topframe> v — Preserve log 


adding proxy for Battery cordova. 15:851 

adding proxy for Device console-via-logger.is:173 
Q Uncaught module cordova/confighelper not found i 

deviceready has not fired after 5 seconds. 

Channel not fired: onCordovaReady 

Channel not fired: onCordovaInfoReady 

navigator. battery 


v Battery ( level: null, _isPlugged: null, channels: Object} 
.isPlugged: null 
„level: null 
> channels: Object 
b. proto : Battery 


lonic Blank Starter 





此 时 ， 如 果 在 浏览 器 控制 台中 运行 havigator.battery 的 时 候 ， 会 发 现 battery 对 象 里 面 都 是 null 
属性 。 
为 更 好 的 测试 测试 此 app (和 插件 ) ， 我 们 需要 添加 一 个 Android 平 台 或 者 iOS 平 台 : 


ionic platform add android 
或 者 : 
ionic platform add ios 


然后 执行 以 下 任意 一 个 命令 : 


e ionic emulate android 
e ionic emulate ios 

e ionic run android 

e ionic run ios 
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7.2 使 用 Cordova 插 件 API 


然后 你 就 可 以 看 到 正确 的 显示 信息 了 : 


Alert Alert 


ionic-emulator Level: 63 isPlugged: true 


-— EM - 





现在 ， 你 已 经 知道 怎样 给 lonic 项 目 添加 Cordova 插 件 以 及 如 何 对 他 们 进行 测试 了 。 下 一 步 分 
钟 ， 我 们 将 学 习 ngCordova 和 其 他 一 些 插件 。 


以 上 截屏 来 自我 的 个 人 版 Genymotion。 此 图 仅 供 展示 之 用 。 


N 
CD 
O1 


Cordova á £ € (whitelist) 插件 


在 开始 学 习 ngCordova 之 前 ， 我 们 将 花 点 时 间 熟 悉 一 个 关键 的 Cordova 插 件 - 白 名 单 插件 
https://github.com/apache/cordova-plugin-whitelist 


Cordova 文 档 里 面 是 这 样 描述 白 名 单 插件 的 : 


"Domain whitelisting is a security model that controls access to external domains over 
which your application has no control. Cordova provides a confgurable security policy to 
defne which external sites may be accessed." 领域 白 名 单 是 一 个 安全 模型 ， 用 来 控制 外 
部 域名 的 访问 ， 在 此 之 上 你 的 应 用 没有 控制 权 。 Cordova 提 供 了 一 个 可 配置 的 安全 策略 
供 配 置 哪些 外 部 网 站 可 以 访问 。 


所 以 当 你 在 使 用 其 他 资源 内 容 ， 想 要 更 多 控制 权 的 时 候 ， 你 就 会 用 得 到 白 名 单 插件 。 你 也 许 
已 经 注意 到 了 “， 咱 们 的 lonic 项 目 已 经 添加 了 白 名 单 插件 。 


译 者 : 听 起 来 与 ActionScript 3% SecurtipDomain.allowDomain € * 4 


如 果 Ilonic 项 目 或 者 Cordova 项 目 没 有 添加 此 插件 的 ， 只 要 运行 如 下 命令 就 可 以 添加 了 : 


ionic plugin add cordova-plugin-whitelist 


— 9.46 £F X Ja RM? MTU € 3t config.xml 9. OH) -Ghi & 3e o 3b x M appt ýE 
Webview 里 面 访问 的 连接 。 
你 可 以 这 样 添加 让 app 的 Webview 里 面 可 以 访问 example.com : 


<allow-navigation href="http://example.com/*" /> 


如 果 你 想 要 允许 webview 访 问 任 何 网 站 的 话 : 


<allow-navigation href="http://*/*" /> 
<allow-navigation href="https://*/*" /> 
<allow-navigation href="data:*" /> 


你 也 可 以 添加 一 个 Intent 白 名 单 ， 在 此 处 可 以 指定 允许 在 设备 上 浏览 的 链接 列表 。 例 如 ， 从 我 
们 的 app 里 面 打 开 SMS app : 


<allow-intent href="sms:*" /> 


或 者 一 个 简单 的 网 页 : 


«allow-intent href="https://*/*" /> 


也 可 以 通过 插件 在 设备 上 增加 Content Security Policy (CSP) http://content- 
securitypolicy.com/ 。 你 所 要 做 的 只 是 在 www/index.html 的 meta 标 签 里 面 添加 如 下 内 容 : 


«!-- Allow XHRs via https only --> 
«meta http-equiv-"Content-Security-Policy" content="default-src 'self' https:"> 


这 是 针对 白 名 单 插件 的 一 个 快速 浏览 ， 白 名 单 插件 适用 于 : 


e Android 4.0.0 及 以 上 版 本 

e iOS 4.0.0 及 以 上 版 本 
记 住 ， 要 添 dd 置 好 才能 访问 外 部 链接 。 在 第 六 章 创建 一 个 书店 应 用 里 
面 ， 确 保 白 名 单 插件 正确 设置 ; 否则 ， 当 你 将 app 部 署 到 设备 上 的 时 候 ，app 运 行 会 
有 问题 。 


ngCordova 


之 前 的 案例 中 ， 我 们 整合 了 一 些 插件 ， 并 且 使 用 了 他 们 的 JavaScript API 与 他 们 进行 交互 。 你 
可 能 发 现 了 ， 所 有 插件 都 处 于 同一 个 全 局 命名 空间 。 与 AngularJS 的 依赖 注入 哲学 不 同 的 是 

Cordova 插 件 处 于 用 以 全 局 命名 空间 之 下 可 以 从 任何 地 方 进行 访问 。 当 使 用 依赖 注入 理念 搭建 

的 应 用 在 测试 的 时 候 ， 可 能 会 带 来 麻烦 。 

因此 ，lonic 团 队 封装 了 Cordova 插 件 ， 由 此 你 就 可 以 将 这 些 功能 作为 服务 进行 注入 。 在 之 前 的 

案例 中 ， 我 们 注入 一 个 gcoraovaDevice， 然 后 使 用 gcordovaDevice.getMode/ 方 法 来 替 

4% device.model ° 

ngCordova 库 不 是 为 lonic 特 定 的 ; 他 也 可 以 用 在 任何 使 用 AngularJS 制 作 的 Cordova app ¥ ° 

本 章 编 写 的 时 候 ，ngCordova 已 有 71 个 插件 。 

现在 ， 我 们 测试 驱动 一 些 ngCordova 插 件 。 


设置 ngCordova 
使 用 ngCordova 之 前 ， 我 们 需要 下 载 并 添加 他 为 依赖 。 新 建 一 个 空白 模板 项 目 来 测试 一 下 : 


ionic start -a "Example 29" -i app.example.twentynone example29 blank 


接 下 来 ， 添 加 ngCordova 作 为 项 目 依 赖 。 使 用 cq 命令 进入 example29 : 


bower install ngCordova --save 


为 验证 ngCordova 在 项 目 中 是 否 添 加 正确 ， 导航 至 Www/lib 文 件 夹 ， 你 将 会 看 到 一 个 名 为 
ngCordova 的 文件 夹 ; 在 dist 文 件 夹 内 ， 你 可 以 找到 一 个 文件 名 ANLE o 
接 下 来 ， 添 加 此 文件 的 引用 ， 然 后 将 ngCordova 作 为 依赖 注入 项 目 。 

打开 www/index.html， 加 上 : 


<!-- ngCordova --> 
«script src="lib/ngCordova/dist/ng-cordova.min.js"></script> 


ngCordova 脚 本 应 该 放 在 jonic.bundle.js 之 后 ，cordova.js 之 前 。 如 果 顺 序 错误 ， 控 制 台 会 
有 错误 信息 输出 。 


接 下 来 ， 我 们 需要 在 我 们 的 模 组 中 添加 ngCordova 依 赖 。 打 开 www/js/app.js， 更 新 Angular 模 
组 声明 : 


angular.module('starter', ['ionic', 'ngCordova']) 


由 于 cordova-plugin-device 已 经 预 装 好 了 ， 我 们 现在 可 以 使 用 $cordovaDevice 服 务 了 。 
如 下 更 新 Www/js/app.js 中 的 run 方 法 : 


.run(function($ionicPlatform, $cordovaDevice) { 
$ionicPlatform.ready(function() { 
// Hide the accessory bar by default (remove this to show the accessory bar ab 
ove the keyboard 
// for form inputs) 
if (window.cordova && window.cordova.plugins.Keyboard) { 
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
} 
if (window.StatusBar) { 
StatusBar.styleDefault(); 
} 
alert('Platform : ' + $cordovaDevice.getPlatform() + '\nModel: ' + $cordovaDev 
ice.getModel()); 
}); 
3) 


我 们 就 可 以 看 到 警告 弹出 设备 平台 和 模 组 信息 了 。 
任何 处 理 插件 相关 的 代码 必须 放 在 gionicPlatform.reaay 中 
Legend 说 明 


从 今 往 后 ， 当 我 说 ，“ 给 |onic app 添 加 一 个 平台 ”的 时 候 ， 意 味 着 你 应 该 运行 : 


ionic platform add android 


也 可 以 : 
ionic platform add ios 


4 Kit > “Alonic app 添 加 ngCordova 支 持 " 的 时 候 ， 意 味 着 你 应 该 运行 : 


bower install ngCordova --save 


接 下 来 ， 跟 早先 一 样 ， 在 www/naoex.htm/ 中 加 入 ng-coradova.Imin.js。 最 后 将 ngCordova 添 加 到 
AngularJS 模 组 作为 依赖 。 
当 我 说 ，“ 模 拟 |lonic app” 的 时 候 ， 意 味 着 你 应 该 运行 : 


ionic emulate android 


ionic emulate ios 


最 后 ， 


We 


我 说 “运行 lonic app” 的 时 候 ， 意 味 着 你 应 该 运行 
ionic run android 
或 者 : 


ionic run ios 


7.3 使 用 ngCordova 


现在 ， 给 example29 app 添 加 平台 并 进行 模拟 的 时 候 。 可 以 看 到 : 
© @  iOSSimulator - iPhone 6 - iPhone 6 / iOS 8.3... 


index.html 


Platform : iOS 
Model : x86 64 


OK 





这 是 一 个 使 用 ngCordova 的 端 对 端的 范例 。 下 一 部 分 ， 我 们 将 通过 ngCordova 服 务 来 使 用 一 些 
Cordova 插 件 。 

每 个 插件 我 都 会 创建 一 个 新 的 项 目 ， 这 样 你 后 续 就 可 以 轻松 的 进行 参考 。 如 果 你 跟随 我 的 脚 
步 进行 练习 的 话 ， 最 好 别 这 样 做 ; 所 有 插件 用 在 一 个 项 目 里 就 好 了 。 
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$cordovaToast 


第 一 个 学 习 的 插件 是 toast 插 件 。 这 个 插件 弹出 一 个 展示 文本 而 不 会 阻 断 app 的 用 户 交 互 。 
新 建 一 个 空白 模板 项 目 : 


ionic start -a "Example 30" -i app.example.thirty example30 blank 


接 下 来 ， 给 项 目 添 加 ngCordova 支 持 。 想 要 使 用 toast API 的 话 ， 那 么 得 先 将 toast 播 件 添 加 到 
项 目 里 : 


ionic plugin add https://github.com/EddyVerbruggen/Toast -PhoneGapPlugin.git 


现在 ， 我 们 给 每 个 需要 用 到 的 插件 分 别 创建 一 个 控制 器 ， 而 不 是 去 run 方法 中 处 理 。 这 样 ， 当 
你 回顾 参考 的 时 候 就 会 比较 简单 。 

打开 www/index.html 在 body 标 签 上 添加 ng-controller="ToastCtr"。 然 后 在 www/js/app.js 中 的 
run 方法 下 面 ， 添 加 控制 器 定义 代码 : 


.controller('ToastCtrl', ['$ionicPlatform', '$cordovaToast',function($ionicPlatform, $ 
cordovaToast) { 
$ionicPlatform.ready(function() 1 
$cordovaToast 
.show('This is a long toast!', 'long', 'center') 
.then(function(success) { 
// success 
}, function(error) { 
// error 
3); 
3); 
}]) 


接着 ， 给 lonic App 添 加 一 个 平台 然后 模拟 之 。 效 果 图 如 下 : 


e iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... 
Carrier F 6:22 PM = 


lonic Blank Starter 


This is a long toast! 





在 本 范例 中 ， 我 们 将 使 用 仅 可 能 小 版 本 的 API 方 法 。 在 学 完 每 个 插件 之 后 ， 我 们 提供 他 们 的 
API 链 接 ; 你 可 以 查看 他 们 支持 的 其 他 方法 。 


更 多 信息 ， 请 访问 : http://ngcordova.com/docs/plugins/toast/ 


$cordovaDialogs 


接着 学 习 的 是 对 话 框 插件 。 他 会 触发 敬告， 确认 以 及 提醒 窗 。 
新 建 一 个 空白 模板 项 目 : 


ionic start example31 blank 


接 下 来 ， 给 项 目 添 加 ngCordova 支 持 。 然 后 使 用 以 下 命令 给 项 目 添加 对 话 框 插件 : 


ionic plugin add cordova-plugin-dialogs 


我 们 将 创建 一 个 对 话 框 控 制 器 。 打 开 www/index.html 在 body 标 签 处 添加 ng- 
controller-"DialogsCtrl" » 
本 范例 中 ， 我 们 将 显示 一 个 提醒 框 供 用 户 输入 文本 。 用 户 在 输入 文本 的 时 候 ， 我 们 将 文本 输 


出 到 屏幕 上 。 我 们 将 www/index.html 的 body 部 分 更 新 如 下 : 


«body ng-app="starter" ng-controller-'DpialogsCtrl"» 
<ion-pane> 
<ion-header-bar class="bar-stable"> 
<h1 class="title">Ionic Blank Starter</h1> 
</ion-header -bar> 
<ion-content> 
<span class="padding">Hello {{name}}! !</span> 
</ion-content> 
</ion-pane> 
</body> 


4 www/js/app.js ¥ ?&7» DialogsCtrl : 


.controller('DialogsCtrl', ['$ionicPlatform', '$scope','$cordovaDialogs', function ($i 


onicPlatform, $scope,$cordovaDialogs) { 
$ionicPlatform.ready(function () { 


$cordovaDialogs.prompt('Name please?', 'Identity', ['Cancel', 
Potter') 
.then(function (result) { 
if (result.buttonIndex == 2) { 
$scope.name = result.input1; 


3); 
3); 
31) 


'OK'], 


'Harry 


7.4 测试 部 分 ngCordova 插 件 


接 下 来 给 lonic App 添 加 一 个 平台 然后 进行 模拟 。 效 果 图 如 下 : 


e iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... e iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3. 


6:43 PM 


lonic Blank Starter 


Hello Harry Potter!! 


index.html 
Name please? 


Harry Potter 


Cancel 


gw 


更 多 信息 参考 : http://ngcordova.com/docs/plugins/dialogs/ 


$cordovaFlashlight 





下 一 个 学 习 的 是 一 个 工具 插件 。 这 个 插件 用 户 开关 设备 上 的 手电 简 。 这 个 插件 不 能 在 模拟 器 


上 测试 。 所 以 你 得 找 个 设备 来 测试 这 个 插件 。 
新 建 一 个 空白 模板 项 目 : 


ionic start -a "Example 32" -i app.example.thirtytwo example32 blank 


接 下 来 ， 给 项 目 添 加 ngCordova 支 持 。 运 行 如 下 命令 添加 手电 简 插 件 到 项 目 : 


ionic plugin add https://github.com/EddyVerbruggen/FlashlightPhoneGap-Plugin.git 


dT7-www/index.html > 4 bodyts & 4b 7 Jm ng-controller-"FlashlightCtrl" ° 


本 例 中 ， 我 们 使 用 jon-toggle 指 令 给 用 户 展示 一 个 开关 ， 然 后 根据 他 的 状态 ， 对 设备 上 的 手电 


简 进 行 开 与 关 操 作 。 由 此 ， 更 新 Wwww/index.html 如 下 : 
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«body ng-app="starter" ng-controller-z"FlashlightCtrl"- 
<ion-pane> 
<ion-header-bar class="bar-stable"> 
<h1 class="title">Ionic Blank Starter</h1> 
</ion-header -bar> 
<ion-content> 
<ion-list> 
<ion-item> 
<ion-toggle ng-disabled="notSupported" ng-model="torch" ng-change= 
"toggleTorch()"> 
Torch 
</ion-toggle> 
</ion-item> 
</ion-list> 
</ion-content> 
</ion-pane> 
</body> 


在 www/js/app.js 的 run 方 法 后 面 添加 FlashlightCtrl : 


.controller('FlashlightCtrl', ['$scope', '$ionicPlatform','$cordovaFlashlight', functi 
on($scope, $ionicPlatform,$cordovaFlashlight) { 
$scope.notSupported = true; 


$ionicPlatform.ready(function() { 
$cordovaFlashlight.available().then(function(availability) 


{ 
// availability = true || false 


$scope.notSupported - !availability; 


3 
$scope.toggleTorch = function() { 
if ($scope.notSupported) return; 


$cordovaFlashlight.toggle() 
.then(function(success) { /* success */ }, 
function(error) ( /* error */ 3); 


3); 


我 们 先 检查 插件 是 否 可 用 。 如 果 可 用 ， 我 们 激活 开关 ; 否则 ， 保 持 开 关 的 禁用 状态 。 
然后 在 用 户 切换 开关 的 时 候 ， 我 们 调用 toggleTorch 方 法 ， 这 样 就 可 以 切换 手电 简 的 开关 状态 
了 。 


如 果 你 在 设备 上 和 运行 app 的 时 候 ， 将 会 看 到 如 下 效果 : 
2% s 19:07 


lonic Blank Starter 


Torch 





如 果 想 要 验证 开关 是 否 会 禁用 ， 可 以 在 模拟 器 中 模拟 此 app。 


更 多 信息 参考 http://ngcordova.com/docs/plugins/flashlight/ 


$cordovaLocalNotification 


接 下 来 学 习 的 是 Notification (通知 ) 插件 。 这 个 插件 主要 是 用 来 通知 或 者 提醒 用 户 App 相 关 的 
活动 。 有 时候 ， 当 后 人 台 运 行 一 些 活动 的 时 候 也 会 显示 通知 -例如 ， 上 传 大 文件 的 时 候 。 
新 建 一 个 空白 模板 App : 


ionic start -a "Example 33" -i app.example.thirtythree example33 blank 


接 下 来 ， 给 项 目 添 加 ngCordova 支 持 。 运 行 如 下 命令 添加 通知 插件 到 项 目 : 


ionic plugin add de.appplant.cordova.plugin.local-notification 


在 本 例 中 ， 我 们 将 在 按 下 按钮 的 时 候 触 发 一 个 通知 ， 然 后 展示 用 户 在 文本 框 中 输入 的 文本 。 
因此 ， 我 们 需要 添加 一 个 名 为 NotifCtr| 的 控制 器 和 一 个 文本 框 ， 一 个 按钮 。 
更 新 Www/index.html 的 body 部 分 为 以 下 代码 : 


«body ng-app="starter" ng-controllerz"NotifCtrl"» 
<ion-pane> 
<ion-header-bar class="bar-stable"> 
«hi class="title">Ionic Blank Starter</hi> 
</ion-header -bar> 
<ion-content> 
<div class="list"> 
<label class="item item-input"> 
<span class="input-label">Enter Notification text</span> 
<input type="text" ng-model="notifText"> 
</label> 
<label class="item item-input"> 
«button class="button button-dark" ng-click-z"triggerNotification() 


a 
Notify 
</button> 

</label> 
</div> 
</ion-content> 
</ion-pane> 
</body> 


在 www/js/app.js 中 添加 NotifCtrl 如 下 : 


.controller('NotifCtrl', ['$scope', '$ionicPlatform', '$cordovaLocalNotification', func 
tion($scope, $ionicPlatform, $cordovaLocalNotification) { 
$ionicPlatform.ready(function() { 
$scope.notifText = 'Hello World!'; 
$scope.triggerNotification = function() { 
$cordovaLocalNotification.schedule({ 
id: 1, 
title: 'Dynamic Notification', 
text: $scope.notifText 
}).then(function(result) { 
console.log(result); 


3) 


3); 


4 测试 部 分 ngCordova 插 件 


模拟 此 Ionic app 的 时 候 ， 会 问 你 是 否 允 许 显示 通知 。 人 允许 之 后 ， 你 可 以 根据 需求 分 发 通知 。 


e iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... 
r 会 10:15 PM 


example33 
Dynamic Notification 
Hello World! 


"example33" Would Like to 
Send You Notifications 


Notifications may include alerts, 
sounds, and icon badges. These can 
be configured in Settings. 


Don't Allow OK 





更 多 信息 参考 : http://ngcordova.com/docs/plugins/localNotification/ 


$cordovaGeolocation 


最 后 一 个 学 习 的 插件 的 Geolocation (定位 ) 插件 ， 这 个 插件 可 以 帮助 我 们 获取 设备 坐标 。 
新 建 一 个 空白 模板 项 目 : 


ionic start -a "Example 34" -i app.example.thirtyfour example34 blank 


接 下 来 ， 给 项 目 添加 ngCordova 支 持 。 运 行 如 下 命令 定位 插件 到 项 目 : 


ionic plugin add cordova-plugin-geolocation 
启动 应 用 的 时 候 ， 我 们 将 去 获取 设备 的 定位 信息 。 hà 得 到 定位 信息 之 前 ， 我 们 展示 一 个 加 载 


内 容 信 息 。 一 旦 我 们 得 到 响应 ， 我 们 就 在 页 面 上 显示 经 度 ， 纬 度 ， 以 及 精确 度 。 
首先 ， 更 新 www/index.html 的 body 部 分 如 下 : 
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«body ng-app="starter" ng-controller="GeoCtrl"> 
<ion-pane> 
<ion-header-bar class="bar-stable"> 
<h1 class="title">Ionic Blank Starter</h1> 
</ion-header -bar> 
<ion-content> 
<ul class="list" ng-show="dataReceived"> 
<li class="item"> 
Latitude : {{latitude}} 
</li> 
<li class="item"> 
Longitude : {{longitude}} 
</li> 
<li class="item"> 
Accuracy : {{accuracy}} 
«/li» 
«/ul» 
</ion-content> 
</ion-pane> 
</body> 


之 后 ， 在 www/js/app.js 的 run 方 法 下 面 添 加 GeoCtr : 


.controller('GeoCtrl', ['$scope', '$ionicPlatform', '$cordovaGeolocation', '$ionicLoadi 


ng', 
$timeout) { 


31) 


'$timeout', function($scope, $ionicPlatform, $cordovaGeolocation, $ionicLoading, 


$ionicPlatform.ready(function() { 


3); 


$scope.modal = $ionicLoading.show( { 


3): 


content: 'Fetching Current Location...', 
showBackdrop: false 


var posOptions = { 


N 


timeout: 10000, 
enableHighAccuracy: false 


$cordovaGeolocation 


.getCurrentPosition(posOptions) 
.then(function(position) { 

$scope.latitude - position.coords.latitude; 
$scope.longitude - position.coords.longitude; 
$scope.accuracy - position.coords.accuracy; 
$scope.dataReceived - true; 
$scope.modal.hide(); 


}, function(err) { 


3): 


// error 

$scope.modal.hide(); 

$scope.modal = $ionicLoading.show( { 
content: 'Oops!! ' + err, 
showBackdrop: false 

1) 

$timeout(function() { 
$scope.modal.hide(); 

), 3000); 


4 测试 部 分 ngCordova 插 件 


在 模拟 此 app 的 时 候 ， 你 将 被 询问 是 否 允 许 访问 定位 信息 。 接 受 之 后 ， 就 可 以 看 到 下 面 这 样 的 
效果 : 
e iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... @ iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... 


Carrier > 10:45 PM 7 
lonic Blank Starter 
Latitude : 37.33233141 


Longitude : -122.0312186 


Accuracy : 5 


Allow *example34" to access 
your location while you use 
the app? 


Don't Allow 





更 多 信息 参考 : http://ngcordova.com/docs/plugins/geolocation/ 
以 上 范例 应 该 给 你 很 好 的 演示 了 如 何 使 用 ngCordova ° 


也 可 以 查看 其 他 关于 ngCordova 其 他 一 些 插件 的 帖子 : 
http://thejackalofjavascript.com/getting-started-withngcordova 完整 的 插件 列表 : 
http://ngcordova.com/docs/plugins/ 当 在 使 用 ngCordova 的 时 候 ， 只 添加 你 需要 用 到 的 插 
Ho 参考 此 帖 自 定义 ngCordova : http://ngcordova.com/build/ 记 住 ， 在 自 定义 
ngCordova 之 后 ， 就 不 能 用 bower 下 载 ngCordova 了 。 


ga 


本 章 中 ， 我 们 看 了 什么 是 Cordova 插 件 ， 以 及 他 们 在 lonic 应 用 中 是 如 何 使 用 的 。 刚 开始 ， 我 们 
为 Android 和 iOS 设 置 了 本 地 开发 环境 。 然后 学 习 了 如 何 模拟 和 运行 app。 接 下 来 ， 我 们 探索 
了 如 何 给 lonic 项 目 添加 Cordova 揪 件 以 及 如 何 使 用 他 们 。 最 后 ， 在 ngCordova 的 帮助 下 ， 我 
们 将 插件 作为 依赖 注入 我 们 的 lonic/Angular app 中 ， 然 后 以 Angular 的 方式 使 用 他 们 。 
在 下 一 章 中 ， 我 们 将 使 用 Ionic ，ngCordova 以 及 Firebase 制 作 另 一 个 app ° 

我 们 将 要 制作 的 应 用 是 一 个 聊天 app， 用 户 可 以 登录 其 中 ， 查 看 在 线 用 户 。 用 户 可 以 选中 其 他 
用 户 交 换文 本 ， 图 片 以 及 地 理 详情 等 信息 。 

聊天 app 的 目的 是 整合 lonic 和 一 个 实时 数据 存储 ， 例 如 Firebase， 同 时 通过 访问 设备 功能 使 通 
讯 内 容 更 丰富 。 


291 


7.4 测试 部 分 ngCordova 插 件 
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制作 一 个 聊天 app 


鉴于 我 们 已 经 学 习 过 了 所 有 移动 混合 app 开 发 需要 的 只 是 ， 本 章 我 们 就 真 枪 实 刀 的 来 做 一 个 

了 。 我 们 将 要 制作 的 是 一 个 信息 应 用 (聊天 应 用 ， 短 信 应 用 ) ， 叫 做 /onic Chat» 第 六 章 书 
店 App 中 ， 我 们 着 重 整 合 REST API ， 本 章 我 们 将 要 制作 的 lonic Chat app 更 多 的 关注 于 利用 
lonic 整 合 设备 功能 ， 例 如 摄像 头 和 Geolocation ， 同时 也 会 重点 关注 与 实时 数据 存储 (如 
Firebase) 对 话 。 

我 们 将 涵盖 如 下 主题 : 


e 初步 理解 Firebase 与 设置 一 个 Firebase 账 号 

e 了 解 AngularFire 

e 了 解 应 用 架构 

e 搭建 lonic app 并 进行 编译 

e 安装 所 需 插 件 并 整合 到 lonic App:8.5.1,8.5.2,8.5.3 
e 在 设备 上 测试 app 


关于 本 章 ， 你 也 可 以 通过 以 下 Github 目 录 来 访问 源 代码 ， 发 起 issue， 与 作者 沟通 : 
https://github.com/learning-ionic/Chapter-8 


lonic 聊 天 应 用 


我 们 本 章 中 将 要 制作 的 原因 名 为 lonic Chat。app 的 目的 是 让 你 熟悉 使 用 AngularFire 和 lonic 制 
作 的 聊天 应 用 ， 同 时 使 用 ngCordova 整 合 Cordova 插 件 与 Ionic。 

首先 我 们 会 学 习 Firebase， 然 后 聊 一 点 AngularFire， 最 后 学 习 如 何 整合 AngularFire 与 Ionic 
Chat 应 用 。 我 们 将 使 用 Firebase 作 为 实时 数据 存储 。 Firebase 将 负责 实时 同步 数据 。 同 时 我 
们 将 使 用 oAuth Cordovadé #+ 4 Firebase Auth 组 合 来 管理 用 户 的 认证 。 

一 旦 用 户 登 录 后 ， 他 将 在 第 一 个 标签 页 中 看 到 所 有 的 在 线 用 户 。 第 二 个 标签 页 是 聊天 历史 和 
当前 参与 聊天 的 用 户 组 成 。 最 后 ， 第 三 个 标签 页 是 设置 和 登 出 页 

当 用 户 点 击 聊天 列表 里 的 人 名 的 时 候 ， 将 会 打开 一 个 聊天 页 ， 聊 天 页 里 可 以 看 到 过 往 聊 天 历 
史记 录 ， 可 以 发 送 新 的 信息 ， 图 片 以 及 地 理 信息 给 其 他 用 户 。 


为 简单 起 见 ， 应 用 中 我 们 只 展示 所 有 的 在 线 用 户 。 你 喜欢 的 话 ， 可 以 实现 一 个 “添加 好 
友 ” 功 能 。 


Firebase 


Firebase 是 一 个 BAAS(Backend As A Service 后 端 即 服务 )， 提 供 了 云 后 端 服务 ， 实 时 数据 存 
i > ALP IIE > RHA EMM 


更 多 信息 关于 Firebase 请 参考 : https://www.firebase.com/features.html 


想 要 快速 了 解 Firebase 如 何 运 作 ， 查 看 以 下 代码 片 : 


var ref = new Firebase("https://<YOUR-FIREBASEAPP>.firebaseio.com"); 
ref.set({ name: "Arvind Ravulavaru" 3); 
ref.on("value", function(data) ( 

var name - data.val().name; 

alert("My name is " + name); 


3) 


第 一 行 中 ， 引 用 了 我 们 的 Firebase 示 例 〈 我 们 下 一 部 分 将 会 创建 ) 。 有 了 他 之 后 ， 我 们 可 以 设 
置 和 保存 一 个 JSON 文 档 到 默认 的 终端 。 Firebase 作 为 一 个 实时 数据 存储 ， 使 用 事件 驱动 的 方 
式 管理 和 同步 数据 。 第 3 行 可 以 看 到 ， 我 们 订阅 了 一 个 value 事 件 ， 当 有 新 的 数据 插入 到 默认 
终端 的 时 候 ， 这 里 将 会 介入 

为 更 好 的 理解 第 3 行 ， 想 象 一 下 当 用 户 1 以 及 在 数据 存储 中 设置 了 value 并 注册 了 value 事 件 。 现 
在 ， 当 用 户 在 浏览 器 中 加 载 这 段 代码 ， 他 先 设置 value ; 这 样 将 触发 用 户 1 第 3 行 的 回调 函数 以 
告知 用 户 1 用 户 2 的 value。 

value 回 调 将 被 调用 ， 传 入 新 加 的 data 值 的 快照 。data.va/ 方 法 将 返回 新 加 的 值 的 记录 。 


果 想 要 代码 在 页 面 上 正常 工作 ， 还 需要 将 Firebase 的 代码 包含 进来 : 


1X 4. Firebase sk > 


可 以 通过 https://www.firebase.com/signup/ 申请 账号 ， 或 者 可 以 使 用 Github 账 号 登录 : 
https://www.firebase.com/login/ 


一 旦 注册 或 者 登录 成 功 之 后 ， 你 会 被 带 到 https:/www.firebase.com/account/#/ > seik ST VAR 
加 一 个 新 的 项 目 。 输 入 app 名 ，Firebase 会 判断 名 字 是 否 被 占用 。 例如， 当 你 输入 "ionic-chat- 
app” 的 时 候 ， 你 会 发 现 这 个 名 字 被 占用 了 (是 我 为 制作 本 章 app 而 使 用 的 ) 。 


选择 一 个 合适 可 用 的 名 字 点 击 Create New App。 这样 将 会 为 你 创建 一 个 新 的 app， 并 附送 一 
个 Firebase URL ° 简单 点 说 这 个 URL 就 是 你 的 账户 的 APl KEY © 相对 于 给 用 户 一 堆 乱 七 八 糟 
的 字符 串 作 为 API 密 钥 来 讲 ， 这 是 非常 优雅 的 解决 方案 了 。 


为 测试 一 切 是 否 正常 ， 我 们 将 执行 之 前 的 代码 片 。 新 建 一 个 文件 夹 名 为 chapter8, 在 其 中 建立 
另 一 个 文件 夹 example35。 然 后 在 chapter8 中 创建 一 个 新 文件 jindex.html。 写 入 如 下 代码 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>Firebase Test Page</title> 
«script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script> 
</head> 
<body> 
<input type="button" onclick="addNewName()" value="Add New Name"> 
<br> 
<ul id="namesList"></ul> 
<script type="text/javascript"> 
var ref = new Firebase("https://«YOUR-FIREBASEAPP» . f irebaseio.com"); 
ref.on('value', function(data) ( 
var names - data.val(); 
clearList(); 
for (var n in names) { 
setName (names [n] .name); 


}); 
function clearList() { 
document.querySelector('ZnamesList').innerHTML = 7 
} 
function setName(name) { 
var newName = document.createElement('li'); 
newName.innerHTML = 'Name : <b>' + name + '</b>'; 
document .querySelector('#namesList').appendChild(newName) ; 
} 
function addNewName() { 
var name = prompt('Enter Name'); 
if (name) { 
// the below statement will save data to the Firebase 
// data store and will invoke the ref.on('value') callback. This will 
// the call the saveName to setdata 
ref.push({ 
'name': name 


1); 
j 
} 
</script> 
</body> 
</html> 


在 早先 的 范例 中 ， 我 们 在 源 文件 头 部 添加 了 Firebase 源 文件 的 引用 。 在 body 部 分 ， 我 们 添加 
了 一 个 按钮 ， 点 击 此 按钮 的 时 候 将 会 弹出 提醒 ， 此 时 用 户 可 以 输入 他 的 名 字 。 用 户 输入 名 字 
完成 之 后 ， 数 据 将 会 以 数组 的 形式 保存 到 Firebase 默 认 的 集合 中 。 一 旦 数据 保存 完 

成 ，ref.on(Value') 事 件 将 会 被 触发 。 一 旦 触发 回调 ， 我 们 就 会 清除 页 面 上 的 HTML 元 素 ， 重 
新 使 用 setName 方 法 展示 名 字 列 表 。 

你 也 可 以 打开 一 个 新 的 标签 页 打开 相同 页 面 。 默 认 之 前 添加 的 值 都 会 展示 出 来 。 你 这 边 不 用 


8.1 T f&Firebase 


做 任何 事情 。 你 可 以 多 添加 些 数据 观察 这 两 个 页 面 的 数据 同步 。 
之 前 范例 展示 了 一 个 实时 数据 存储 是 如 何 工 作 的 。 现 在 你 可 以 看 到 Firebase 对 于 我 们 的 聊天 应 
用 如 何 简单 易 用 。 


当 用 户 输 入 用 户 名 的 时 候 ， 我 们 不 直接 展示 这 个 值 。 我 们 等 待 他 被 存放 到 数据 存储 中 ， 
然后 我 们 等 待 Firebase 调 用 value 事 件 。 在 value 回 调 里 ， 我 们 给 用 户 展 示 了 value。 参考 
此 处 理解 数据 实时 更 新 : https://.firebaseio.com 


如 果 在 Firebase 上 导航 到 你 的 app 的 时 候 ， 你 可 以 看 到 : 
YOUR APP NAME 
— -JrrbJ9KcEhkOG6kAS3CP 


name: "Arvind Ravulavaru" 


~ -JrrbKcs8X3nUd6Hncgx 


i 
r 
i 
i 
i 
i 
i 
i 
i 
- 


i-- name: "Arvind's Evil Twin" 





所 有 添加 的 名 字 都 将 直接 在 你 的 app 名 字 下 展示 出 来 。 
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AngularFire 


鉴于 lonic 使 用 AngularJS 作 为 他 的 客户 端 JavaScript 框 架 ， 我 们 将 使 用 一 个 Firebase 向 的 
AngularFire 以 Angular 的 方式 来 与 Firebase 交 互 。 
我 们 将 快速 浏览 一 遍 AngularFire， 如 下 : 


var app = angular.module("nameApp", ["firebase"]); 

app.controller("NamesCtrl", function($scope, $firebaseArray) { 
var ref = new Firebase("https://<YOUR-FIREBASEAPP>.firebaseio.com/names") ; 
// create a synchronized array 
$scope.names - $firebaseArray(ref); 


$scope.addName - function() ( 
$scope.names.$add({ 
text: $scope.newName 
3 
}; 
}); 


首先 我 们 将 新 建 一 个 AngularJS 应 用 ， 然 后 添加 了 firebase 作 为 依赖 。 然 后 我 们 创建 了 一 个 控 

制 器 ， 注 入 $firebaseArray 作 为 依赖 。 一 旦 调用 控制 器 的 时 候 ， 我 们 将 创建 一 个 Firebase App 
的 引用 。 此 时 ， 我 们 将 使 用 name 创 建 一 个 子 集 或 者 内 置 集 然后 保存 ， 而 不 是 将 他 直接 存放 到 
根 集合 。 

将 $firebaseArray(ref) 指派 给 $scope.names 就 可 以 将 他 变 为 同步 集合 了 。 简 单 来 说 ， 如 果 数 
据 存 储 里 面 的 数据 变更 的 时 候 ， 我 们 的 scope 变 量 将 会 自动 同步 更 新 ， 同 时 触发 视图 或 者 模板 
里 面 的 更 新 。 这 种 现象 也 称 为 三 方 数 据 (Three-Way Data) HE ° 


更 多 关于 三 方 数据 绑 定 ， 请 参考 : https:/www. ed SEMEL AA aad 


angular-databinding.html 如 果 想 要 上 面 的 代码 正常 执行 ， 需 要 在 你 的 页 面 上 导入 
Firebase ，AngularJS， 以 及 AngularFire 脚 本 文件 。 


我 们 将 实现 快速 实现 一 个 范例 来 展示 AngularFire 是 如 何 工作 的 。 新 建 一 个 文件 夹 名 
为 example36， 在 其 中 新 建 一 个 文件 名 为 index.html， 在 其 中 加 入 代码 如 下 : 


<!DOCTYPE html» 
«html» 
«head» 
<title>AngularFire Test Page</title> 
«script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"> 
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js 
"></script> 
«script src="https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js">< 
/script> 
</head> 
<body ng-app="NamesApp" ng-controller="NamesCtr1"> 
<input type="button" ng-click-"addNewName()" value="Add New Name"> 
<br> 
<ul> 
<li ng-repeat="n in names"> 
Name : <b> {{n.name}} </b> 
</li> 
</ul> 
<script type="text/javascript"> 
var app = angular.module("NamesApp", ["firebase"]); 
app.controller("NamesCtrl", function($scope, $firebaseArray) { 
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/names" ) 


// create a synchronized array 
$scope.names - $firebaseArray(ref); 


$scope.addNewName = function() ( 
var name = prompt('Enter Name'); 
if (name) { 
$scope.names.$add({ 
name: name 


3); 
}; 
} 
}); 
</script> 
</body> 


</html> 


以 上 范例 中 ， 我 们 引入 了 Firebase，AngularJS 以 及 AngularFire 的 源 文件 。 
一 定 要 记 住 在 Firebase 和 AngularJS 之 后 加 载 AngularFire。 


我 们 新 建 了 一 个 模 组 名 为 NamesApp， 添 加 了 一 个 新 的 控制 器 名 为 NamesCtri。 我 们 的 HTML 
由 一 个 重复 Scope 里 面 的 names 数 组 的 ng-repeat 组 成 。names 交 量 是 一 个 同步 数组 。 

当 用 户 点 击 Add New Name 按 钮 的 时 候 ， 我 们 给 用 户 提 醒 他 在 何 处 输入 一 个 名 字 。 一 旦 名 字 
输入 完成 ， 我 们 将 使 用 我 们 的 名 字 同 步 数 组 的 $aqdq 方 法 将 新 对 象 推送 到 数据 存储 。 然后 


8.2 1 ffAngularFire 


Firebase 负 责 在 数据 之 间 进 行 同步 。 
现在 ， 当 你 打开 https. firebaseio.com 你 将 看 到 : 


YOUR APP NAME 


i 
---— names 


L..— -JrrctJDZOIMMRHSnuT1 


T 
| | 
| 
i 


= name: "Arvind Ravulavaru" 
— -Jrrc2yViSom2GfTPBZZ 


i 
z name: "Arvind's Evil Twin" 





EK» RUE RB 8| — 4 3758. 3 303A EL A 89names & TE E f » 


在 运行 范例 之 前 ， 我 已 经 删 掉 了 昌 数 据 。 如 果 想 利用 Firebase 制 作 一 
个 Create > Read > Update 和 Delete (CRUD ， 增 删改 查 ) 的 应 用 的 话 ， 参 考 : 
http://thejackalofjavascript.com/getting-started-withfirebase/ 
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应 用 架构 


现在 我 们 熟悉 了 Firebase 和 AngularFire， 我 们 就 来 看 一 下 app 如 何 设 计 : 








DEVICE 
FEATURES | 


INTERFACE | 








CORDOVA 
CORDOVA | 
WRAPPER PLUGINS | 











如 上 图 所 示 ， 我 们 将 使 用 Firebase 作 为 数据 存储 。 在 lonic 应 用 中 使 用 AngularFire 来 与 
Firebase 交 互 。lonic 应 用 同时 也 使 用 ngCordova 与 Cordova 插 件 交 互 以 使 用 设备 功能 。 

在 我 们 将 要 制作 的 聊天 应 用 中 ，Firebase 的 角色 是 管理 聊天 数据 。 在 我 们 的 聊天 应 用 中 ， 我 们 
需要 在 Firebase 集 合 中 创建 两 个 终端 : 


e 在 线 用 户 : 这 个 终端 存储 所 有 的 在 线 用 户 
e 聊天 : 这 个 终端 将 存储 两 个 用 户 之 前 的 聊天 信息 


作为 聊天 应 用 的 一 部 分 ， 我 们 允许 用 户 以 下 操作 : 


e 发 送 文本 信息 
e 从 相册 分 享 图 片 
e 照相 并 分 享 
e 分 享用 户 地 理 位 置 我 们 将 把 所 有 数据 都 存放 到 Firebase 中 。 你 是 不 是 在 想 ， 图 片 要 哪里 
HA? 好 吧 ， 这 就 是 聪明 之 处 了 ; 我 们 将 会 把 图 片 转 成 base64 格 式 然后 将 base64- 
emcoae 的 字符 串 存 放 到 Firebase。 至 于 用 户 位 置信 息 ， 我 们 只 保存 用 户 的 坐标 ， 然 后 在 
其 他 用 户 界 面 上 复制 坐标 就 可 以 了 。 
也 可 以 使 用 Google Static Maps API (谷歌 静态 地 图 API) 来 分 享 地 理 信息 : 
https://developers.google.com/maps/documentation/staticmaps/ 


ITE 


我 们 将 使 用 Google Open ID 认证 服务 来 认证 用 户 。 同 时 我 们 也 会 使 用 Corodva 的 ng-coraova- 
oauth 插 件 与 Firebase 的 oAuth 组 合 来 做 认证 服务 。Cordova 插 件 通 过 浏览 器 内 KARET 理 
弹出 认证 和 获取 token。 然 后 此 token 会 被 传 到 Firebase 认 证 以 "MR 。 这 些 在 我 
们 开始 开发 app 的 时 候 会 越 来 越 清晰 。 


应 用 工作 流 


用 户 启动 app 的 时 候 ， 我 们 将 展示 应 用 首页 ， 有 一 个 滑动 框 和 一 个 Login 按 钮 。 


到 目前 为 止 应 用 只 支持 Google 登 录 。 用 户 点 击 Login 按 钮 的 时 候 ， 他 将 被 重 定 向 到 Google 登 
录 页 面 。 登 录 成 功 之 后 ，app 提 供 了 访问 之 后 ， 用 户 将 被 定向 到 首页 ， 在 这 里 Google oAuth 提 
供 的 token 将 被 发 送 到 Firebase 来 建立 session (会 话 ) 。 然后 ， 用 户 将 被 重 定向 到 有 三 个 标 
签 页 的 页 面 。 

标签 页 一 是 由 所 有 在 线 用 户 组 成 。 标 签 由 当前 正在 聊天 中 的 用 户 组 成 ， 最 后 ， 标 签 页 
三 是 由 设置 屏幕 和 Lougout 选 项 所 Rin o 

当 用 户 点 击 标签 页 一 或 者 标签 页 二 的 列表 中 的 用 户 的 时 候 ， 用 户 将 被 带 到 聊天 页 面 ， 此 页 将 
CR 

这 样 设计 app 以 使 事情 简单 化 并 能 涵盖 其 他 一 些 主题 ， 可 以 帮助 你 更 好 的 理解 移动 混合 应 用 开 
发 的 完整 生态 系统 。 


app 预 览 
继续 进行 之 前 ， 我 们 先 快速 查看 一 下 最 终 输出 ， 因 为 在 开发 完成 之 前 我 们 是 看 不 到 任何 输出 


结果 的 。 
下 图 左边 展示 的 是 登录 Login 屏 幕 。 下 图 右边 显示 的 一 个 三 个 标签 页 的 是 主页 Home 屏 幕 : 


8.3 理解 应 用 架构 


t T Hd | T | © * All 
IONIC CHAT APP IONIC CHAT APP 


M 


lonic User 2 


ionic.testuser2 gmail.com 


Notify.people where you are 
with one click location sender 


S 


The Super chat app, lets you 


connect with your friends, share 
images, audio, video, geo- 
location and ofcourse texts! 


Login With Google 
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下 图 左边 展示 的 是 聊天 界面 ， 右 边 显示 的 地 图 屏幕 是 用 户 分 享 的 地 理 位 置信 息 的 展示 : 


lonic User 2 


lonic User 1 says : 
Hey 


»vie Max $ 


it + iS. 
i pl - 





EB of Share 


数据 结构 


默认 每 次 集合 增加 新 的 数据 集 的 时 候 ，Firebase 都 会 通知 所 有 的 客户 端 。 当 我 们 创建 一 个 普通 
的 聊天 时 的 时 候 ， 我 们 只 需要 通知 所 有 连接 到 app 的 用 户 ， 不 用 做 其 他 多 余 的 事情 。 

但 是 ， 由 于 我 们 是 关注 一 对 一 的 聊天 应 用 ， 我 们 需要 一 些 逮 辑 来 帮助 我 们 管理 参与 双方 的 用 

户 之 间 的 通讯 。 

当 用 户 登 录 的 时 候 ， 我 们 使 用 当前 用 户 详情 来 更 新 在 线 用 户 集 合 。 这 将 会 通知 所 有 的 已 登录 

用 户 。 一 旦 某 用 户 离线 的 时 候 ， 我 们 从 在 线 用 户 集合 中 移 除 此 用 户 。 


我 们 使 用 Firebase Authentication 来 存储 登录 信息 。 在 Forge 中 看 不 到 任何 已 注册 用 户 信 
息 。 现 在 用 户 已 登录 ， 那 么 他 将 出 现在 在 线 用 户 中 。 如 果 用 户 B 想 要 和 用 户 A 聊 天 ， 我 们 
需要 创建 一 个 新 的 终端 ， 仅 供用 户 A 和 用 户 B 通 讯 。 


创建 一 个 新 的 动态 终端 的 逻辑 有 点 复杂 ， 步 骤 如 下 : 


1 分辨 用 户 A 和 用 户 B 的 邮件 地 址 


2， 对 用 户 A 和 用 户 的 邮件 地 址 执行 哈 希 函数 。 当 我 们 以 不 同 顺序 传 入 相同 数组 的 时 候 ， 这 个 
哈 希 函数 都 会 返回 同一 个 字符 串 

3. 使 用 以 上 哈 希 字符 串 ， 我 们 在 聊天 集合 内 创建 一 个 新 的 终端 

4. 如果 用 户 B 对 用 户 人 发 起 了 聊天 ， 用 户 B 将 创建 一 个 动态 终端 ， 根据 用 户 B 向 用 户 A 发 送 的 
第 一 个 信息 ， 将 会 触发 在 聊天 集合 内 运行 一 个 监听 器 。 这 个 监听 器 将 会 检查 信息 发 送 对 
象 是 否 是 已 登录 用 户 。 如 果 是 ， 将 会 通知 用 户 A。 


有 点 复杂 ， 但 是 却 能 很 好 的 工作 。 


我 在 一 个 hode-webkit 虽 面 版 聊天 应 用 中 实现 了 相同 的 逻辑 。 可 以 在 此 处 查 
Æ : http://thejackalofjavascript.com/one-to-one-chat-client/ 现在 我 们 对 数据 如 何 架构 有 
了 想法 ， 我 们 需要 考虑 一 下 要 用 到 哪些 Cordova 插 件 。 


Cordova 插件 


我 们 将 要 用 到 以 下 插件 (除了 模块 自动 下 载 的 之 外 ) 


e cordova-plugin-inappbrowser : 这 个 用 来 管理 Google 认 证 

e cordova-plugin-media-capture : 用 来 照相 并 与 其 他 用 户 分 享 

e com.synconset.imagepicker : 用 来 从 相册 获取 一 张 图 片 

e cordova-plugin-file : 在 将 图 片 转 成 base64 的 时 候 与 文件 系统 交互 

e cordova-plugin-geolocation : 用 来 获取 用 户 的 Geo 坐 标 插件 会 在 具体 使 用 的 时 候 学 习 。 


Github 上 的 代码 


本 章 代 码 已 经 开源 在 Github 上 : https://github.com/learning-ionic 如 果 有 任何 问题 可 以 发 起 
issue， 我 们 尽力 为 大 家 解答 。 我 也 会 解决 读者 报告 的 所 有 bug 。 


开发 应 用 


首先 ， 我 们 将 新 建 和 设置 app。 


运行 如 下 命令 ， 新 建 一 个 标签 页 应 用 : 


ionic start -a "Ionic Chat App" -i app.ionic.chat ionic-chat-app tabs 


通过 cq 命令 ， 进 入 iomic-chat-app 文 件 夹 运行 


ionic serve 


然后 就 可 以 看 到 标签 页 范例 的 app 了 。 
继续 深入 之 前 ， 我 们 将 通过 Bower 安 装 应 用 所 需 的 依赖 。 在 项 目的 根 目 录 下 ， 运 行 


bower install ngCordova ng-cordova-oauth firebase angularfire lato --save 


这 些 bower 组 件 的 使 用 主旨 : 


e ngCordova : ngCordova 库 

e ng-cordova-oauth : #5 4-5 ay 4& > ng-cordova-oauth^& ^ i718 Æ 4 ngCordovada Ff 49 
问题 ， 所 以 我 们 另外 安装 和 使 用 他 。 我 现在 面 对 的 这 个 问题 在 你 学 习 本 书 的 时 候 可 能 已 
经 解决 了 9 

e firebase : 这 是 firebase 的 源 代 码 

e angularfire : 这 是 AngularFire 的 源 代 码 

e lato : Lato 字 体 〈(https://www.google.com/fonts/specimen/Lato ) 


RE ZM Google?» R Lato 体 ， 因 为 我 已 经 在 本 机 安装 了 。 这 样 就 确保 了 在 本 机 没有 联网 
的 情况 下 字体 可 以 正常 使 用 。 你 也 可 以 参考 JocalFont 来 实现 几 秒 钟 内 本 地 存储 Web 字 体 
的 缓存 (https://github.com/jaicab/localFont) ， 这 样 也 可 以 在 不 用 本 机 安装 的 情况 下 正 
常 显示 字体 。 


接 下 来 ， 我 们 将 给 项 目 添加 SCSS 支 持 ; 运行 如 下 : 


ionic setup sass 


现在 ， 我 们 给 下 载 下 来 的 依赖 库 添 加 引用 。 在 jnaqex.htm/ 中 进行 如 下 变更 。 
首先 ， 我 们 先 看 一 下 ng-cordova 和 hg-cordova-oauth。 以 下 两 个 script 标 签 是 在 lonic bundle 之 
后 ，cordova.js 之 前 : 


«script src="lib/ngCordova/dist/ng-cordova.js"></script> 
«script src="lib/ng-cordova-oauth/dist/ng-cordovaoauth.js"></script> 


我 们 也 要 在 app 添 加 指令 来 管理 地 图 。 我 们 稍 后 会 添加 这 个 指令 ， 但 是 现在 只 要 添加 引用 就 可 
VATS o 
在 services.js 文 件 的 引用 之 后 添加 如 下 SCript 标 签 : 


«script src="js/directives.js"></script> 


接 下 来 ， 我 们 需要 添加 Google 地 图 API 的 引用 。 在 head 标 签 的 最 后 添加 如 下 脚本 : 


«script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgE3k3per7mf0qjZLWwlbMX 
QL10hH-x44&sensor=true"></script> 


我 将 给 你 展示 如 何在 使 用 Google 认 证 设置 里 面 获取 你 自己 的 Google API key (上 面 脚本 
中 的 script 标 签 ) 


最 后 ， 我 们 将 添加 Lato 字 体 。 在 jonic.app.css 的 引用 之 上 ， 添 加 : 


«link href="lib/lato/css/lato.min.css" rel="stylesheet"> 


时 过 境 迁 ， 上 面 参 考 的 资源 可 能 已 经 不 是 如 今 的 路 径 了 。 如 果 资 源 出 现 “hot 
found (404) "错误 ， 在 /jb 文件 来 里 面 重新 检查 他 的 位 置 。 


我 们 会 将 boqy 标 签 上 的 模 组 名 从 starter 改 为 lonicChatApp。 接着 ， 将 nav bar 类 型 从 bar- 
stable 改 为 bar-positive ° 

做 完 这 些 ， 我 们 就 完成 了 index.html 的 设置 。 

接 下 来 ， PONSE > 。 由 于 我 们 在 index 页 面 上 对 模 组 进行 了 重 命名 操作 ， 我 们 
在 app.jS 也 需要 对 他 进行 重 命名 。 修 改 后 的 AngularJS 模 组 声明 如 下 : 


angular.module('IonicChatApp', ['ionic', 'chatapp.controllers','chatapp.services', 'ch 
atapp.directives', 'ngCordova','ngCordovaOauth', 'firebase']) 


我 们 也 重 命 名 了 控制 器 和 服务 的 命名 空间 ， 在 指令 模 组 ，ngCordova, ngCordovaOaythfe 
Firebase 中 添加 引用 。 


8.4 3t &lonic app 


注意 ， 我 们 将 ngCordovaOauth 模 组 作为 依赖 添加 到 了 主 模 组 。 这 是 因为 打包 版 (ng- 
cordova.js) 在 本 章 编写 的 时 候 有 个 issue。 如 果 你 使 用 打包 版 的 Cordova oAuthdé fF ; 
你 就 不 需要 包含 此 依赖 库 和 他 的 源 代码 了 。 
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用 到 的 名 词 : 


e authentication 授权 ， 认 证 


安装 所 需 的 Cordova 插 件 


我 们 现在 安装 所 需 插件 ， 运 行 如 下 


ionic plugin 


ionic plugin 


ionic plugin 


ionic plugin 


ionic plugin 


add 


add 


add 


add 


add 


https://github. 


cordova-plugin- 


cordova-plugin- 


cordova-plugin- 


cordova-plugin- 


TA 


M 


com/wymsee/cordova-imagePicker.git 


file 


geolocation 


inappbrowser 


media-capture 


ix f Google API key 


由 于 我 们 的 app 用 来 Google OAuth， 我 们 需要 一 个 Client ID。 可 通过 以 下 步骤 获取 一 个 Client 
ID: 

1. 导航 至 : https://console.developers.google.com 

2. “a Create project ， 输 入 项 目 名 

3. 创建 完成 后 打开 项 目 

4. 在 左边 的 菜单 中 点 击 APls and auth 然后 点 击 Consent 。 填 写 必 需 信息 。 产 品名 是 强制 


的 。 


5， 点 击 左 边 的 菜单 中 的 APIs and auth， 然 后 点 击 Credentials 
6， 点 击 OAuth 部 分 下 面 的 Create new Client ID 


T. 选中 如 下 


o 应 用 类 


8. 一 旦 上 述 信 


型 为 网 页 应 用 (web application) 

o 授权 (Authorized) JavaScript origins% http://localhost 

o 授权 (Authorized) 重 定向 URI 为 http://localhost/callback 

息 填 写 完 成 ， 点 击 Creat Client ID 你 就 可 以 看 到 网 页 应 用 的 Client ID 


有 了 Client ID 之 后 ， 你 就 需要 在 我 们 的 Firebase in 更 新 。 导 航 到 Firebase 应 用 页 (查看 


实时 数据 更 新 的 地 方 ) 
右边 页 面 刷 新 之 后 ， 点 击 Google 标 签 


以 上 步骤 对 认证 工作 非常 重要 


。 在 页 面 左边 ， 可 以 找到 一 个 菜单 选项 “Login and Auth: 点 击 之 。 3 


页 ， 填 入 之 前 b ode Client ID 和 Secret 。 


如 果 你 想 创建 一 个 API key 来 访问 Google 地 图 API， 可 以 使 用 以 下 步骤 : 


1， 点 击 左 边 菜单 的 APls and auth > %4 & à Credentials 

2. 点击 Public API Access 下 面 的 Create new Key 

3， 从 弹出 框 里 面 选择 浏览 key 

4. 将 Accept request from these HTPP referrers x A2% & È 

5. 点击 Create。 这 样 将 生成 API key， 这 一 用 这 个 API key 4 index.html? 8) 98 key 
6.， 点 击 左 边 菜单 中 的 APls and auth， 然 后 点 击 APls 

7. 在 搜索 框 里 面 搜索 Google Maps JavaScript API v3， 点 击 搜索 到 的 连接 

8， 点 击 Enable API 按 钮 激活 API 


现在 ， 我 们 有 了 Client ID， 我 们 将 设置 一 些 常 量 。 在 www/js/app.js** 中 ，run 方 法 之 后 config* 
方法 之 前 ， 添 加 以 下 3 个 常量 : 


.constant('FBURL', 'https://ionic-chat-app.firebaseio.com/') 


.constant('GOOGLEKEY', '1002599169952-4uchnlc7ahm6ng4696p9tgriadhsiqv5.apps.googleuser 
content.com' ) 


.constant('GOOGLEAUTHSCOPE', ['email']) 


TE FBURL# 4% 4% 89 Firebase; Jl URL ° 3 Google key 替 换 为 我 们 早先 生成 的 Client ID » 4E 
为 OAuth 请 求 的 一 部 分 ， 我 们 需要 向 Google 发 送 一 个 scope ， 这 样 我 们 就 可 以 取 回 我 们 需要 
的 信息 。 我 们 的 应 用 只 需要 用 户 的 基本 信息 ; 此 外 ， 我 们 用 邮件 作为 一 个 scope 。 


设置 路 由 以 及 路 由 认证 


由 于 我 们 建立 的 是 一 个 标签 页 模板 的 应 用 ， 因 为 我 们 就 基本 有 了 所 有 所 需 的 路 由 。 我 们 将 对 
已 有 的 路 由 做 一 些 变更 并 给 他 们 添加 认证 。 这 样 ， 当 授权 失败 的 时 候 ， 视 图 就 不 会 展示 。 我 
们 将 使 用 路 由 的 resolve 属 性 来 实现 。 


继续 深入 之 前 ， 我 建议 先 浏览 一 下 AngularJS 状 态 路 由 器 的 resolve 属 性 。 这 个 属性 负责 
在 加 载 控制 器 之 前 解析 所 有 指定 的 promise。 这 个 在 我 们 加 载 控制 器 之 间 验 证 用 户 授 权 
状态 非常 有 用 。 更 多 信息 参考 : https://github.com/angularui/ui-router/wiki#resolve 
Firebase*) $firebaseAuth 9 X. ok AAJ : 
e $waitForAuth : 他 返回 一 个 将 用 做 解析 当前 授权 状态 的 promise。 这 个 仅 用 在 主页 路 由 
上 。 
e $requireAuth : 他 返回 一 个 与 当前 授权 状态 一 切 解 析 的 promise ; 否则 ， 将 拒绝 这 个 
promise。 这 个 将 用 在 每 个 需要 授权 认证 的 路 由 。 
我 们 将 平衡 借助 这 两 个 方法 来 控制 未 授权 和 授权 的 用 户 可 以 看 到 什么 不 可 以 看 到 什么 。 
我 们 将 为 现 有 的 路 由 多 加 一 个 路 由 名 为 main。 这 个 路 由 将 作为 默认 路 由 且 作 为 我 们 应 用 的 主 
Re 我 们 在 每 个 路 由 上 添加 一 个 resolve 属 性 用 来 解析 Firebase Auth。 同时 ， 修 改 chat-detail 


路 由 使 他 摆脱 chats 路 由 的 子路 由 的 身份 。 
更 新 后 的 路 由 部 分 代码 如 下 : 


$stateProvider.state('main', { 
(Ue Ar 
templateUrl: 'templates/main.html', 
controller: 'MainCtrl', 
cache: false, 
resolve: ( 
'currentAuth': ['FBFactory', 'Loader', function(FBFactory, 
Loader.show('Checking Auth..'); 
return FBFactory.auth().$waitForAuth(); 
34 
} 
}) 


.state('tab', { 
url: "/tab", 
abstract: true, 
cache: false, 
templateUrl: "templates/tabs.html" 
3) 
.state('tab.dash', { 
url: '/dash', 
cache: false, 
views: { 
'tab-dash': { 
templateUrl: 'templates/tab-dash.html', 
controller: 'DashCtrl' 


resolve: ( 
'currentAuth': ['FBFactory', function(FBFactory) { 
return FBFactory.auth().$requireAuth(); 


}] 


}) 


.state('tab.chats', { 
url: '/chats', 
cache: false, 
views: { 
'tab-chats': { 
templateUrl: 'templates/tab-chats.html', 
controller: 'ChatsCtrl' 


3 
resolve: ( 
'currentAuth': ['FBFactory', function(FBFactory) { 
return FBFactory.auth().$requireAuth(); 


}] 


}) 


.state('tab.account', { 
url: '/account', 
cache: false, 
views: { 
'tab-account': ( 
templateUrl: 'templates/tab-account.html', 
controller: 'AccountCtrl' 


resolve: ( 
'currentAuth': ['FBFactory', function(FBFactory) { 
return FBFactory.auth().$requireAuth(); 
3] 


}) 


.state('chat-detail', { 
url: '/chats/:otherUser', 
templateUrl: 'templates/chat-detail.html', 
controller: 'ChatDetailCtrl', 
cache: false, 
resolve: ( 
'currentAuth': ['FBFactory', 'Loader', 
function(FBFactory, Loader) { 
Loader.show('Checking Auth..'); 
return FBFactory.auth().$requireAuth(); 
3] 


3); 


$urlRouterProvider.otherwise('/'); 


在 如 上 代码 中 使 用 工厂 的 时 候 我 们 会 设置 FBFactory 和 Loaaer。 
注意 ， 我 们 将 otherwise 的 路 由 更 新 为 1 


此 时 ， 当 $requireAuth 拒 绝 promise 的 时 候 ， 以 为 这 用 户 去 到 了 一 个 需要 认证 的 页 面 ， 但 是 用 
户 并 没有 认证 。 因为， 我 们 需要 在 这 个 时 候 添 加 一 个 监听 器 ， 将 用 户 重 定向 到 登录 页 。 当 
Firebase Auth 拒 绝 了 promise 的 时 候 ， 他 发 出 了 一 个 stateChangeError 事 件 。 我 们 将 在 run 方 
法 中 监听 这 个 事件 ， 然 后 将 用 户 重 定向 到 主页 。 

在 $ionicPlatform.ready 方 法 中 ， 添 加 以 下 stateChangeError 事 件 到 fun 方 法: 


$rootScope.$on('$stateChangeError', function(event, toState,toParams, fromState, fromP 
arams, error) { 
if (error === 'AUTH REQUIRED') { 
$state.go('main'); 


3); 


记 住 给 run 方 法 注入 $rootScope 和 $state 依 赖 。 


接 下 来 ， 我 们 将 使 用 $ionicConfigProvider 来 设置 一 些 默 认 值 。 
给 config 方 法 添加 $ionicConfigProvider 作 为 依赖 。 在 开始 初始 化 路 由 之 前 ， 将 以 下 代码 片段 添 
加 到 config 方 法 内 : 


$ionicConfigProvider.backButton.previousTitleText(false); 
$ionicConfigProvider.views.transition('platform'); 
$ionicConfigProvider.navBar.alignTitle('center'); 


上 面 的 配置 也 不 是 必需 的 。 只 是 给 你 展示 如 何在 一 个 实时 app 中 使 
Jl $ionicConfigProvider 


设置 服务 /工厂 


现在 我 们 设置 好 了 主体 应 用 ， 我 们 现在 就 来 看 看 需要 用 到 的 工厂 了 。 工 厂 都 将 添加 
到 www/js/services.js 中 。 可 以 先 打 开 这 个 文件 ， 清 空 其 中 所 有 内 容 。 
首先 ， 添 加 chatapp.services 模 组 和 一 个 与 localStorage 交 互 的 工厂 : 


angular.module('chatapp.services', []) 
.factory('LocalStorage', [function() { 
return { 
set: function(key, value) { 


return localStorage.setItem(key, JSON.stringify(value) ); 
3 


get: function(key) { 


return JSON.parse(localStorage.getItem(key) ); 
3 


remove: function(key) { 
return localstorage.removeItem(key); 
3 
}; 
}]) 


接 下 来 ， 添 加 一 个 工厂 用 来 管理 lonic 加 载 服务 : 


.factory('Loader', ['$ionicLoading', '$timeout',function($ionicLoading, $timeout) { 
return { 
show: function(text) { 
//console.log('show', text); 
$ionicLoading.show( { 
content: (text || 'Loading...'), 
noBackdrop: true 
i) 
3 


hide: function() { 
//console.log('hide'); 
$ionicLoading.hide(); 

3 

toggle: function(text, timeout) { 
var that - this; 
that.show(text); 
$timeout(function() { 

that.hide(); 

), timeout || 3000); 


}; 


1) 


也 要 创建 一 个 与 Firebase 交 互 的 工厂 : 


.factory('FBFactory', ['$firebaseAuth', '$firebaseArray', 'FBURL', 'Utils', function($fi 
rebaseAuth, $firebaseArray, FBURL, Utils) { 
return { 
auth: function() { 
var FBRef = new Firebase(FBURL); 
return $firebaseAuth(FBRef ); 


Lh 


olUsers: function() { 
var olUsersRef = new Firebase(FBURL + 'onlineUsers'); 
return $firebaseArray(olUsersRef); 


Lh 


chatBase: function() { 
var chatRef = new Firebase(FBURL + 'chats'); 
return $firebaseArray(chatRef); 


Lh 


chatRef: function(loggedInUser, OtherUser) { 
var chatRef = new Firebase(FBURL + 'chats/chat ' + Utils.getHash(OtherUser 
, loggedInUser)); 
return $firebaseArray(chatRef); 


上 面 的 代码 中 ，olUsersRef 将 Firebase 的 引用 指向 https://ionicchat- 
app.firebaseio.com/onlineUsers ，chatBase 指 向 https://ionic-chatapp.firebaseio.com/chats , 
chatRef 指 向 在 两 个 用 户 之 间 动 态 创建 的 终端 。 


我 们 也 会 创建 一 个 用 户 工厂 用 来 存储 用 户 信息 ， 在 线 用 户 和 已 有 ID。 已 有 I|D 是 在 
https://ionicchat-app.firebaseio.com/onlineUsers 中 创建 的 入 口 object ID。 这 个 已 有 ID 将 在 用 
户 离线 时 ，omlineUsers 集 合 删除 对 象 之 用 : 


.factory('UserFactory', ['LocalStorage', function(LocalStorage) { 


var userKey - 'user', 
presenceKey - 'presence', 
olUsersKey - 'onlineusers'; 
return { 


onlineUsers: {}, 


setUser: function(user) ( 
return LocalStorage.set(userKey, user); 


Lh 


getUser: function() { 
return Localstorage.get(userKey); 


Lh 


cleanUser: function() { 
return LocalStorage.remove(userKey) ; 


Lh 


setOLUsers: function(users) { 
// >> we need to store users as pure object. 
// else we lose the $ method of FB. 
// >> sometime, onlineUsers becomes null while 
// navigating between tabs, so we save a copy in LS 
LocalStorage.set(olUsersKey, users); 
return this.onlineUsers - users; 


Lh 


getOLUsers: function() { 
if (this.onlineUsers && this.onlineUsers.length > 0) { 
return this.onlineUsers 
) else { 
return Localstorage.get(olUsersKey); 


Lh 


cleanOLUsers: function() { 
LocalStorage.remove(olUsersKey); 
return onlineUsers - null; 


}, 


setPresenceld: function(presenceId) { 
return LocalStorage.set(presenceKey, presenceId); 


F 


getPresenceId: function() { 
return LocalStorage.get(presenceKey); 


}, 


cleanPresenceId: function() { 
return Localstorage.remove(presenceKey); 
}, 
J; 
31) 


最 后 ， 添 加 一 些 工具 方法 : 


.factory('Utils', [function() { 
return { 


escapeEmailAddress: function(email) { 
if (!email) return false 
// Replace '.' (not allowed in a Firebase key) with ',' 
email = email.toLowerCase(); 
email = email.replace(/\./g, ','); 
return email.trim(); 


Lh 


unescapeEmailAddress: function(email) { 
if (!email) return false 
email - email.toLowerCase(); 
email = email.replace(/,/g, '.'); 
return email.trim(); 


}, 


getHash: function(chatToUser, loggedInUser) { 
var hash = ''; 
if (chatToUser > loggedInUser) { 


hash = this.escapeEmailAddress(chatToUser) + ' ' + this.escapeEmailAdd 
ress(loggedInUser); 
) else { 
hash = this.escapeEmailAddress(loggedInUser) + ' ' + this.escapeEmail 
Address(chatToUser); 
j 


return hash; 


}, 


getBase64ImageFromInput: function(input, callback) { 
window. resolveLocalFileSystemURL(input, function(fileEntry) { 
fileEntry.file(function(file) { 
var reader - new FileReader(); 
reader.onloadend = function(evt) { 
callback(null, evt.target.result); 
J; 
reader .readAsDataURL( file); 
} 
function() { 
callback('failed', null); 
3) 
3 
function() { 
callback('failed', null); 


3) 


F; 


getHash 方 法 接收 两 个 邮件 地 址 返回 一 个 哈 硕 。 这 个 方法 用 作 构 建 动态 终端 
getBase64ImageFromlnput 用 作 将 图 片 转换 成 Dase64 编 码 的 字符 囊 ， 以 存 


ix 2 Firebase ° 


做 完 这 些 之 后 ， 我 们 完成 了 工厂 的 设置 。 


设置 地 图 指令 


由 于 我 们 需要 给 用 户 提供 当前 位 置 分 享 的 功能 呢 ， 我 们 需要 一 个 地 图 指令 来 将 坐标 以 一 个 可 


呈现 的 方式 显示 出 来 。 


我 们 从 地 图 模块 (https://github.com/driftyco/ionicstarter- 


maps/blob/master/js/directives.js) 中 借用 *map* 指 令 ， 按 需 修改 。 
在 www/js 文 件 夹 内 新 建 一 个 文件 名 为 qirectives.js。 更 新 其 内 容 如 下 : 


angular.module('chatapp.directives', []) 


.directive('map', 
return { 


function() { 


restrict E 


scope: { 


onCreate: '&' 


Lh 


link: function($scope, $element, $attr) { 


function initialize() { 


var 
var 
var 


var 


n 


lat - $attr.lat || 43.07493; 
lon = $attr.lon || -89.381388; 
myLatlng = new google.maps.LatLng(lat, lon); 


mapOptions = { 

center: myLatlng, 

zoom: 16, 

mapTypeld: google.maps.MapTypeld.ROADMAP 


if ($attr.inline) { 


var 


mapOptions.disableDefaultUI = true; 
mapOptions.disableDoubleClickZoom = true; 
mapOptions.draggable = true; 
mapOptions.mapMaker = true; 
mapOptions.mapTypeControl = false; 
mapOptions.panControl = false; 
mapOptions.rotateControl = false; 


map = new google.maps.Map($element [0], mapOptions); 


// custom function to manage markers 


map. 


__setMarker = function(map, lat, lon) { 


var marker = new google.maps.Marker({ 
map: map, 
position: new google.maps.LatLng(lat, lon) 


3); 


$scope.onCreate({ 
map: map 


}); 


map.  setMarker(map, lat, lon); 


j 
if (document.readyState --- 'complete') ( 
initialize(); 
) else { 
google.maps.event.addDomListener(window, 'load', initialize); 


} 
3); 


我 所 做 的 修改 是 : 调整 map 指 令 以 在 聊天 信息 中 的 内 联 地 图 上 使 用 内 联 属性 能 够 正常 运行 。 
我 也 添加 了 展示 标记 的 支持 。 


设置 控制 器 


先 来 ， 设 置 每 个 路 由 的 控制 器 。 打 开 www/js/controllerjs 清 除 其 中 所 有 内 容 。 添 加 一 个 新 模 组 
名 为 chatapp.controllers : 


angular.module('chatapp.controllers', []) 


给 chatapp.controllers 模 组 添加 一 个 run 方 法 。run 方 法 由 监视 进入 的 聊天 信息 的 逻辑 所 组 成 。 
我 们 利用 聊天 基本 URL 建 立 了 一 个 连接 ， 然 后 监听 了 他 的 任何 改变 。 如 果 有 新 的 聊天 添加 或 
者 聊天 内 容 变更 ， 我 们 将 辨别 新 的 聊天 信息 是 否 跟 当前 用 户 相关 。 如 果 是 的 话 ， 我 们 广播 一 
个 newChatHistory 事 件 ， 这 样 在 聊天 历史 标签 页 中 ， 我 们 将 会 展示 新 的 聊天 信息 : 


.run(['FBFactory', '$rootScope', 'UserFactory', 'Utils',function(FBFactory, $rootScope 
, UserFactory, Utils) ( 


$rootScope.chatHistory - []; 


var baseChatMonitor - FBFactory.chatBase(); 
var unwatch = baseChatMonitor.$watch(function(snapshot) { 
var user - UserFactory.getUser(); 
if (!user) return; 
if (snapshot.event == 'child added' || snapshot.event == 'child_changed') ( 
var key - snapshot.key; 
if (key.indexOf(Utils.escapeEmailAddress(user.email)) >= 0) ( 
var otherUser - snapshot.key.replace(/ /g,'').replace('chat', '').repl 
ace(Utils.escapeEmailAddress(user.email),  ''); 


if ($rootScope.chatHistory.join(' ').indexOf(otherUser) === -1) ( 
$rootScope.chatHistory.push(otherUser); 


$rootScope.$broadcast('newChatHistory'); 

ex 

* TODO: PRACTICE 

* Fire a local notification when a new chat 
comes in. 

yf 


3); 
为 对 以 上 代码 更 好 的 理解 ， 我 没有 实现 本 地 通知 那 部 分 。 如 果 你 愿意 的 接受 的 话 ， 你 的 


任务 就 是 在 聊天 送 到 当前 用 户 的 时 候 实现 本 地 通知 。 通 知 内 容 是 由 聊天 信息 和 来 源 用 户 
所 组 成 。 当 点 击 通知 的 时 候 ， 将 会 把 当前 用 户 带 到 聊天 界面 。 


接 下 来 ， 我 们 将 开始 /MainCtr1。MainCtr/ 与 我 们 一 样 的 主 视图 连接 。 将 以 下 的 MainCtrl 定 义 添 
加 到 www/js/controllers.js 文 件 里 的 run 方 法 后 面 : 


.controller('MainCtrl', ['$scope', 'Loader', '$ionicPlatform','$cordovaOauth', 'FBFact 
ory', 'GOOGLEKEY', 'GOOGLEAUTHSCOPE', 'UserFactory', 'currentAuth', '$state', 
function($scope, Loader, $ionicPlatform, $cordovaOauth,FBFactory, GOOGLEKEY, GOOGLEAUT 
HSCOPE, UserFactory, currentAuth,$state) { 
$ionicPlatform.ready(function() { 
Loader .hide(); 
$scope.$on('showChatInterface', function($event,authData) 1 
if (authData.google) { 
authData = authData.google; 


UserFactory.setUser(authData); 
Loader.toggle('Redirecting..'); 
$scope.onlineusers - FBFactory.olUsers(); 


$scope.onlineusers.$10aded().then(function() { 
$scope 

.onlineusers 

.$add({ 
picture:authData.cachedUserProfile.picture, 
name: authData.displayName, 
email: authData.email, 
login: Date.now() 

3) 

.then(function(ref) { 
UserFactory.setPresenceId(ref.key()); 
UserFactory.setOLUsers($scope.onlineusers); 
$state.go('tab.dash'); 

3) 

3); 
return; 


3); 


if (currentAuth) { 
$scope.$broadcast('showChatInterface',currentAuth.google); 


$scope.loginWithGoogle = function() { 
Loader.show('Authenticating..'); 
$cordovaOauth.google(GOOGLEKEY, GOOGLEAUTHSCOPE). 
then(function(result) { 

FBFactory.auth() 
.$authwithOAuthToken('google',result.access token) 
.then(function(authData) { 

$scope.$broadcast('showChatInterface',authData); 

}, function(error) { 

Loader.toggle(error); 

1); 


}, function(error) { 


Loader.toggle(error); 


3) 


当 promise 在 路 由 的 resolve 方 法 中 解析 完成 的 时 候 ，/MainCtr/ 将 会 被 调用 ， 并 给 他 传 

入 currentAuth 作 为 依赖 。 如 果 用 户 已 经 登录 的 话 ，currentAuth 将 等 于 oauth ; 相反 ， 则 

为 null。 

我 们 在 $scope 上 注册 了 showChatinterface。 这 个 方法 在 用 户 已 经 登录 (具体 来 说 就 

是 currentAuth 不 为 null) 或 者 用 户 明确 登录 的 时 候 被 调用 。 当 此 事件 触发 的 时 候 ， 我 们 通过 
UserFactory.setUser 方 法 将 用 户 数 据 保存 到 /ocalStorage。 一 旦 这 个 操作 完成 了 ， 我 们 将 发 起 
一 个 请 求 以 获取 所 有 的 在 线 用 户 。 拿 到 在 线 用 户 列表 之 前 ， 我 们 就 将 当前 用 户 详情 添加 

到 onlineUsers 集 合 中 。 添 加 完成 之 后 ， 我 们 在 /localStorage 中 setPresenceiD 和 setOLUsers 然 
后 将 用 户 重 定向 到 聊天 界面 。 


当 用 户 的 点 击 Login with Google 按 钮 的 时 候 ，$scope.loginWithGoogle 方 法 将 被 触发 。 我 已 
经 添加 了 Firebase Auth 和 cordovaOauth 插 件 以 展示 如 何 同 时 使 用 他 们 。 如 果 你 觉得 复杂 的 
话 ， 你 可 以 直接 使 用 Firebase Auth 登 录用 户 ， 而 不 是 从 cordovaOauth 获 取 token 然 后 使 用 
Firebase $authWithOAuthToken 认 证 用 户 。 
一 旦 认证 成 功 ， 我 们 将 广播 一 个 showChatinterface 事 件 ， 这 个 事件 将 会 保存 数据 并 重 定向 用 
户 。 

作为 范例 的 一 部 分 ， 我 只 实现 了 Google OAuth*。 作 为 练习 ， 你 可 以 整合 其 他 OAuth 提 供 
一 旦 用 户 登 录 成 功 ， 他 将 被 重 定向 到 标签 页 界面 。 默 认 的 标签 页 是 dashboard 标 签 页 ， 他 


与 DashCtr/ 连 接 。 
DashCtr| 的 目标 是 取得 在 线 用 户 列 表 并 展示 。 他 需要 这 样子 的 代码 : 


.controller('DashCtrl', ['$scope', 'UserFactory','$ionicPlatform', '$state', '$ionicHi 
story',function($scope, UserFactory, $ionicPlatform, $state,$ionicHistory) { 
$ionicPlatform.ready(function() { 
$ionicHistory.clearHistory(); 


$scope.users - UserFactory.getOLUsers(); 
$scope.currUser - UserFactory.getUser(); 
var presenceId = UserFactory.getPresenceId(); 


$scope.redir - function(user) ( 
$state.go('chat-detail', { 
otherUser: user 


3) 


在 上 面 的 控制 器 代码 中 我 使 用 了 $ionicHistory.clearHistory 方 法 。 这 样 就 保证 了 ， 当 用 户 
登录 成 功 并 且 在 标签 页 上 的 时 候 ， 点 击 设备 的 返回 按钮 不 会 将 用 户 带 回 登 录 界 面 而 是 直 
接 退 出 app。 因此 ， 使 用 $jonicHistory.clearHistory 方 法 我 们 清空 历史 记录 ， 然 后 设备 的 
返回 按钮 将 关闭 应 用 。 


接 下 来 我 们 将 使 用 中 间 位 置 的 标签 页 ， 这 个 标签 页 用 来 展示 聊天 记录 的 。 由 于 这 只 是 一 个 范 
例 应 用 ， 所 以 我 们 不 需要 严格 的 维护 任何 用 户 资料 。 我 们 直接 从 auth 对 象 里 面 获 取 值 ， 然 后 
建立 UI。 我 们 将 使 用 相同 的 逻辑 在 历史 标签 页 中 显示 用 户 信息 。 用 户 对 象 是 从 在 线 用 户 列表 
中 获取 的 。 

ChatsCtr/ 代 码 如 下 ， 添 加 到 DashCtrl 后 面 : 


.controller('ChatsCtrl', ['$scope', '$rootScope', 'UserFactory', 'Utils', '$ionicPlatfo 
rm', '$state', function($scope, $rootScope,UserFactory, Utils, $ionicPlatform, $state) 
{ 
$ionicPlatform.ready(function() { 
$scope.$on('$ionicView.enter', function(scopes, states) { 
var olUsers = UserFactory.getOLUsers(); 


$scope.chatHistory = []; 
$scope.$on('AddNewChatHistory', function() ( 

var ch - $rootScope.chatHistory, 

matchedUser; 

for (var i = 0; i < ch.length; i++) ( 

for (var j = 0; j < olUsers.length; j++) { 
if (Utils.escapeEmailAddress(olUsers[j].email) == ch[i]) { 
matchedUser = olUsers[j]; 


}; 


if (matchedUser) { 
$scope.chatHistory.push(matchedUser); 
) else { 
$scope.chatHistory.push({ 
email: Utils.unescapeEmailAddress(ch[i]), 
name: 'User Offline' 


}) 


n 
3); 


$scope.redir - function(user) ( 
$state.go('chat-detail', { 
otherUser: user 


3); 


$rootScope.$on('newChatHistory', function($event) { 
$scope.$broadcast('AddNewChatHistory'); 


3) 


$scope.$broadcast( 'AddNewChatHistory'); 


}) 
3); 
31) 


注意 看 /matcheaUser 对 象 。 在 用 户 有 聊天 历史 但 是 用 户 在 离线 状态 的 时 候 ， 这 个 值 将 会 


设 为 一 个 离线 值 ， 之 前 也 说 过 。 
在 这 里 ， 我 们 一 直 监 听从 run 方 法 里 面 广播 的 newChatHistory 事 件 。 最 后 ， 当 当前 登录 用 户 点 


击 用 户 名 的 时 候 ， 我 们 将 应 用 重 定向 到 chat-detail 视 图 。 
接 下 来 是 应 用 里 最 活跃 的 页 面 ， 这 个 页 面 用 来 与 其 他 用 户 交 互 。 他 的 控制 器 代码 太 多 ， 没 法 


一 次 贴 出 来 。 因 此 ， 我 将 控制 器 分 离 成 不 同 的 逻辑 块 ， 逐 个 解释 。 
首先 ， 我 们 添加 了 控制 器 定义 和 他 的 依赖 : 


.controller('ChatDetailCtrl', ['$scope', 'Loader','$ionicPlatform', '$stateParams', 'U 
serFactory', 'FBFactory', 

'$ionicScrollDelegate', '$cordovalmagePicker', 'Utils','$timeout', '$ionicActionSheet' 
, "$cordovaCapture', 

'$cordovaGeolocation', '$ionicModal',function($scope, Loader, $ionicPlatform, $statePa 
rams,UserFactory, FBFactory, $ionicScrollDelegate, $cordovalmagePicker, 

Utils, $timeout, $ionicActionSheet, $cordovaCapture, $cordovaGeolocation, $ionicModal) 


t 


$ionicPlatform.ready(function() 1 


Loader.show('Establishing Connection...'); 
// controller code here.. 
3); 
}]) 
多 依赖 库 哇 ! 


接 下 来 获取 chatToUser 然 后 将 他 添加 到 scope。 完 成 之 后 ， 我 们 连接 到 动态 Firebase 终 端 ? 以 
下 代码 (将 会 在 结束 前 ) 将 会 添加 到 ChatDetailCtr/ 中 : 


$scope.chatToUser = $stateParams.otherUser; 
$scope.chatToUser = JSON.parse(S$scope.chatToUser); 
$scope.user - UserFactory.getUser(); 


$scope.messages = FBFactory.chatRef($scope.user.email, 

$scope.chatToUser.email); 

$scope.messages.$loaded().then(function() { 
Loader.hide(); 
$ionicScrollDelegate.scrollBottom(true); 


3); 


我 们 使 用 $ionicScrollDelegate 服 务 来 滚动 视图 面板 到 最 后 一 条 聊天 信息 。 接 下 来 ， 新 建 一 
方法 用 作 向 Firebase 添 加 新 的 聊天 信息 : 


function postMessage(msg, type, map) { 
var d - new Date(); 
d = d.toLocaleTimeString().replace(/:\d+ /, ' '); 
map - map || null; 
$scope.messages.$add(1 
content: msg, 


time: d, 
type: type, 
from: $scope.user.email, 
map: map 
1); 
$scope.chatMsg - ''; 


$ionicScrollDelegate.scrollBottom(true); 


当 用 户 输入 文本 点 后 点 击 Send 的 时 候 ， 我 们 调用 sendMessage 方 法 : 


$scope.sendMessage = function() { 

if (!$scope.chatMsg) return; 

var msg = '«p»' + $scope.user.cachedUserProfile.name + ' says : <br/>' + $scope.ch 
atMsg + '</p>'; 

var type - 'text'; 

postMessage(msg, type); 


使 用 以 下 Action Sheet (动作 表单 ) 服务 ， 来 展示 一 系列 的 列表 ， 例 如 : Share Picture 分 享 图 
A , Take Picture 拍 照 ,Share My Location 分 享 位 置信 息 : 


$scope.showActionSheet = function() { 
var hideSheet = $ionicActionSheet . show( { 


buttons: [{ 

text: 'Share Picture' 
} í 

text: 'Take Picture' 
} í 


text: 'Share My Location' 
3l, 
cancelText: 'Cancel', 
cancel: function() { 
// add cancel code.. 
Loader .hide(); 
buttonClicked: function(index) { 
// Clicked on Share Picture 
if (index === 0) { 
Loader.show('Processing...'); 
var options - ( 
maximumImagesCount: 1 


}; 
$cordovaImagePicker .getPictures(options) 
.then(function(results) { 
if (results.length > 0) { 

var imageData = results[0]; 
Utils.getBase64ImageFromInput ( 
imageData, function(err, base64Img) 
{ 
//Process the image string. 
postMessage('<p>' + $scope.user.cachedUserProfile.name + ' posted : <b 


r/><img class-"chat-img" src="' + base64Img + '">', 'img'); 
Loader .hide(); 
3 
j 


}, function(error) { 
// error getting photos 
console.log('error', error); 
Loader .hide(); 


}); 
} 
// Clicked on Take Picture 
else if (index === 1) { 
Loader.show('Processing...'); 
var options - ( 
limit: 1 
}; 
$cordovaCapture.capturelmage(options).then(function(imageData) { 
Utils.getBase64l1mageFromInput(imageData[0].fullPath, function(err, base64I 
mg) 1 


//Process the image string. 
postMessage('«p»' + $scope.user.cachedUserProfile.name + ' posted : «b 
r/><img class-"chat-img" src="'+ base64Img + '">', 'img'); 
Loader .hide(); 
3); 
3}, function(err) { 
console.log(err); 
Loader .hide(); 
3); 
} 
// clicked on Share my location 
else if (index === 2) { 
$ionicModal.fromTemplateUrl('templates/map-modal.html', { 
scope: $scope, 
animation: 'slide-in-up' 
}).then(function(modal) { 
$scope.modal = modal; 
$scope.modal.show(); 
$timeout(function() { 
$scope.centerOnMe(); 
), 2000); 
}); 
} 


return true; 


当选 中 Action Sheet 中 的 选项 的 时 候 ， 如 果 : 


e index = 0 : 我 们 调用 gcoraovajmagePicker 服 务 让 用 户 选 择 图 片 。 当 用 户 选中 图 片 后 ， 我 
们 调用 Utils.getBase64ImageFromlnput 方 法 将 图 片 转变 成 Dase64 的 字符 串 。 然后 我 们 使 
用 postMessage 方 法 将 他 发 送 给 Firebase。 

e index = 1 : 我 们 调用 $cordovaCapture 服 务 的 capturelmage 方 法 来 照相 ， 转 成 base64 字 
符 串 ， 然 后 发 送 给 Firebase » 

e index = 2 : 我 们 调用 lonic Modal 带 有 地 图 ， 指 向 用 户 当 前 位 置 。 


为 了 在 弹出 框 中 使 用 地 图 ， 我 们 需要 在 scope 上 定义 一 些 方法 : 


$scope.mapCreated = function(map) { 
$scope.map - map; 


}; 


$scope.closeModal = function() { 
$scope.modal.hide(); 


}; 


$scope.centerOnMe = function() { 
if (!$scope.map) { 
return; 
} 
Loader.show('Getting current location...'); 
var posOptions = { 
timeout: 10000, 
enableHighAccuracy: false 


$cordovaGeolocation.getCurrentPosition(posOptions). 
then(function(pos) { 
$scope.user.pos - ( 
lat: pos.coords.latitude, 
lon: pos.coords.longitude 


hu 


$scope.map.setCenter(new google.maps.LatLng($scope.user.pos.lat, $scope.user.p 
os.lon)); 
$scope.map.__setMarker($scope.map,  $scope.user.pos.lat, $scope.user.pos.lon); 
Loader .hide(); 
}, function(error) { 
alert('Unable to get location, please enable GPS to continue'); 
Loader .hide(); 
$scope.modal.hide(); 
1); 
HN 


$scope.selectLocation = function() { 
var pos - $scope.user.pos; 


var map = { 
lat: pos.lat, 
lon: pos.lon 
J; 


var type = 'geo'; 


postMessage('«p»' + $scope.user.cachedUserProfile.name + ' shared : <br/>', type, 


map); 
$scope.modal.hide(); 


地 图 创建 的 时 候 将 会 调用 mapCreated 方 法 。closeModal 将 用 来 关闭 弹出 框 。centerOnMe 方 
法 在 地 图 初始 化 完成 之 后 自动 调用 。 这 个 方法 使 用 $cordovaGeolocation.getCurrentPosition 
来 获取 用 户 当 前 位 置 。 一 旦 位 置 获取 成 功 ， 他 会 用 一 个 标记 来 替换 那个 点 。 如 果 没 法 通过 
Soorgova Coolocadon: getCurrentPosition 来 获取 用 户 坐 标 ， 我 们 就 会 询问 用 户 激活 GPS。 

当 功 能 正常 运行 的 时 候 ， 就 NERO EE ° 

最 后 ，AccountC 奶 ， 连 接 到 TBb3。 这 个 控制 器 有 管理 用 户 登 出 的 方法 : 


.controller('AccountCtrl', ['$scope', 'FBFactory', 'UserFactory','$state', 
function($scope, FBFactory, UserFactory, $state) { 


$scope.logout = function() { 
FBFactory.auth().$unauth(); 
UserFactory.cleanUser(); 
UserFactory.cleanOLUsers(); 


// remove presence 

var onlineUsers - UserFactory.getOLUsers(); 

if (onlineUsers && onlineUsers.$getRecord) { 
var presencelId = UserFactory.getPresenceId(); 
var user = onlineUsers.$getRecord(); 
onlineUsers.$remove(user); 


UserFactory.cleanPresenceId(); 
$state.go('main'); 
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在 此 ， 你 也 可 以 设置 一 些 个 人 偏好 ， 例 如 当 打 开 应 用 的 时 候 显示 通知 ， 播 放声 音 等 等 。 


置 模 板 


现在 我 们 完成 了 所 有 的 Javascript 代 码 ， 我 们 接 下 来 就 是 实现 每 个 视图 的 模板 来 。 所 有 视图 都 
是 逻辑 实现 ， 简 单 易 懂 。 第 一 个 是 main.html，www/templates/main.html 的 全 部 内 容 : 


«ion-view view-title-"IONIC CHAT APP" cache-view="false"> 
<ion-content> 
<ion-slide-box does-continue-"true" auto-play="true" showpager="false"> 
<ion-slide> 
«label class="t-r">Share Photos seamlessly between family & Friends</1 


abel> 
<img src="http://placeimg.com/640/480/tech/grayscale" /> 
</ion-slide> 
<ion-slide> 
«label class="c-c">Simple One click login to start the fun! !</label> 
<img src="http://placeimg.com/640/480/people/sepia" /> 
</ion-slide> 
<ion-slide> 
<label class="b-r">Notify people where you are with one click location 
sender</label> 


<img src="http://placeimg.com/640/480/tech/sepia" /> 

</ion-slide> 

</ion-slide-box> 

<div class="text-center padding"> 
<h3>The Super chat app, lets you connect with your friends, share images, 

audio, video, geo-location and ofcourse texts!</h3> 

«button class="button button-dark" ngclick="loginwithGoogle()"> 
Login With Google 
</button> 

</div> 

</ion-content> 


</ion-view> 


42 F & Lwww/templates/tabs.htmlX tt « 4& M ACT A BAAR ABA : 


<ion-tabs class="tabs-striped tabs-top tabs-background-positive 
tabs-color-light"> 
<!-- Dashboard Tab --> 
«ion-tab title="IONIC CHAT APP" icon-off="ion-ios-pulse" iconon="ion-ios-pulse-str 
ong" href="#/tab/dash"> 
<ion-nav-view name="tab-dash"></ion-nav-view> 
</ion-tab> 
<!-- Chats Tab --> 
<ion-tab title-"IONIC CHAT APP" icon-off="ion-ios-chatboxesoutline" icon-on="ion-i 
os-chatboxes" href="#/tab/chats"> 
<ion-nav-view name="tab-chats"></ion-nav-view> 
</ion-tab> 
<!-- Account Tab --> 
«ion-tab title-"IONIC CHAT APP" icon-off="ion-ios-gear-outline" icon-on="ion-i0s-g 
ear" href="#/tab/account"> 
«ion-nav-view name="tab-account"></ion-nav-view> 
</ion-tab> 
</ion-tabs> 


4% T & 22 www/templates/tab-dash.html : 


«ion-view view-title-"IONIC CHAT APP"> 
<ion-content> 
<ion-list> 
<ion-item ng-show="users.length == 1"> 
<h3 class="text-center padding">Looks like no one is online</h3> 
</ion-item> 
<ion-item class="item-avatar item-icon-right" ngrepeat="user in users | fi 
lter:search:user" ng-if="user.email !- currUser.email" ng-click="redir('{{user}}')"> 
<img ng-src="{{user.picture}}"> 
<h2>{ {user .name}}</h2> 
<p>{{user .email}}</p> 
<i class="icon ion-chevron-right iconaccessory"></i> 
</ion-item> 
</ion-list> 
</ion-content> 


</ion-view> 


4% & www/templates/tab-chats.html : 


<ion-view view-title="IONIC CHAT APP"> 
<ion-content> 
<ion-list> 
<ion-item ng-show="chatHistory.length == 0"> 
<h3 class="text-center padding">Looks like there is no chat history</h 
3> 
</ion-item> 
«ion-item class="item-icon-right item-icon-left" ngclass="{'item-avatar' 
user.picture}" ng-repeat="user in chatHistory | filter:search:user" ng-if="user.email 
!= currUser.email" ng-click="redir('{{user}}')"> 
<img ng-src="{{user.picture}}" ngshow="user.picture"> 
<h2>{ {user .name}}</h2> 
<p>{{user .email}}</p> 
<i class="icon ion-chevron-right iconaccessory"></i> 
</ion-item> 
</ion-list> 
</ion-content> 


</ion-view> 


第 三 个 标签 页 www/templates/tab-account.html: 


«ion-view view-title-"IONIC CHAT APP"> 
«ion-content has-header="true"> 
<ion-list> 
<!-- Uncomment below if you would like to add preferences to the app --> 
<!-- <ion-item> 
<ion-toggle ng-change="updatePreference()" ngmodel="preference.notification" toggle-cl 
ass="toggle-positive">Show Notifications</ion-toggle> 
</ion-item> --> 
<ion-item> 
<button class="button button-dark button-block" ng-click="logout()"> 
Logout 
</button> 
</ion-item> 
</ion-list> 
</ion-content> 


</ion-view> 


PR VA AT A È HE 83357; www/templates/chat-detail.html : 


«ion-view view-title="{{chatToUser .name}}"> 
<ion-pane> 
<ion-content class="has-header padding"> 

<div class="button-bar"> 
<a class="button button-calm" uisref="tab.dash">Online Users</a> 
<a class="button button-calm" uisref="tab.chats">Chat History</a> 

</div> 

<br> 

<ion-list> 
<ion-item ng-show="messages.length == 0"> 

<h3 class="text-center">No messages yet!</h3> 

</ion-item> 
«ion-item class="item-avatar" ng-repeat="message in messages" ng-class 


="{left : message.from == user.email, right : message.from != user.email}"> 

«img ng-src="{{user.cachedUserProfile.picture}}" ng-if="message.fr 
om == user.email"> 

<img ng-src="{{chatToUser.picture}}" ngif="message.from != user.em 
ail"> 


<p ng-bind-html="message.content"></p> 
<map inline="true" class="inline-map" lat="{{message.map.lat}}" lo 
n="{{message.map.lon}}" ngif="message.map.lat && message.map.lon"> 
</ion-item> 
<div class="padding-bottom"></div> 
</ion-list> 
</ion-content> 
<ion-footer-bar class="bar-footer"> 
<input class="footerInput" type="text" placeholder="Enter Message" ng-mode 
1="chatMsg"> 
<button class="button button-dark icon-left ionpaper-airplane" ng-click="s 
endMessage();"></button> 
«button class="button button-dark icon-left ion-more" ng-click="ShowAction 
Sheet();"»«/button» 
</ion-footer -bar> 
</ion-pane> 


</ion-view> 


注意 在 这 里 我 们 使 用 了 map 指 令 ， 内 联 属性 设 为 true 


当 用 户 选择 分 享 位 置信 息 的 时 候 ， 我 们 需要 一 个 地 图 展示 。 现 在 我 们 就 来 创建 这 个 。 
在 www/templates 中 新 建 一 个 文件 名 为 map-modal.html， 更 新 如 下 : 


<ion-modal-view> 
<ion-content scroll="false"> 
«map on-create="mapCreated(map)"></map> 
</ion-content> 
<ion-footer-bar class="bar-stable"> 
<a ng-click="selectLocation()" class="button button-icon icon ion-checkmark">S 
hare</a> 
<a ng-click="closeModal()" class="button button-icon icon ion-close">Cancel</a 


</ion- footer -bar> 
</ion-modal-view> 


xà SCSS 


为 完善 此 应 用 ， 还 需要 对 SCcSssionic.app.scss 做 如 下 变更 。 
首先 ， 重 写 4 个 lonic SCSS 变 量 ， 然 后 包含 lonic SCSS 框 架 : 


$positive: #1976D2 !default; 
$font-family-base: 'Lato', 

sans-serif !default; 
$tabs-striped-off-opacity: 1 !default; 


// The path for our ionicons font files, relative to the built CSS in www/css 
$ionicons-font-path: "../lib/ionic/fonts" !default; 


// Include all of Ionic 
Qimport "www/lib/ionic/scss/ionic"; 


T o HE Xa RAE de ah EEX : 


.bar .title { 
font-size: 21px; 


} 

.slider { 
background-color: #eee; 
min-height: 200px; 
max-height: 400px; 

} 


ion-slide img { 
width: 100%; 
height: 50%; 
margin: 0 auto; 
display: block; 
max-height: 350px; 
max-width: 500px; 


.t-r { 
position: absolute; 
top: 5px; 
right: 0; 
margin: 20px; 
margin-right: 5px; 
margin-left: 25px; 
text-align: center; 
width: 8496; 


.b-r { 

position: absolute; 
bottom: 5px; 
margin: 20px; 
right: Opx; 
margin-right: 5px; 
margin-left: 25px; 
text-align: center; 
width: 8496; 


.c-c { 
position: absolute; 
top: 25%; 
margin: 20px; 
left: Opx; 
margin-right: 5px; 
margin-left: 25px; 
text-align: center; 
width: 84%; 


ion-slide label { 
font-size: 21px; 
color: #333; 
padding: 5px; 
border-radius: 5px; 
background: linear-gradient(to right, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 
100%) ; 
Opacity: 0.8; 


为 聊天 界面 添加 以 下 样式 : 


.footerInput { 
width: 7796; 


} 

.chat-img { 
width: 5096; 

} 

.left, 

.right { 
width: 7596; 
clear: both; 
margin: 5px; 

} 

.left { 
float: left; 
text-align: left; 

} 

.right { 
float: right; 
text-align: right; 

H 

.usr-img { 
width: 48px; 

H 

map { 
display: block; 
width: 10096; 
height: 100%; 

} 


.inline-map { 
height: 200px; 
border: 1px solid #787878; 


height: 10096; 


测试 应 用 
现在 ， 应 用 创建 完成 ， 我 们 需要 添加 iOS 平 台 和 Android 平 台 来 进行 测试 了 : 


ionic platform add ios 
ionic platform add android 


接 下 来 ， 我 们 就 要 模拟 /运行 app 了 。 我 有 一 个 三 星 Galaxy Note 3 和 一 个 iOS 模 拟 器 作为 测试 
设备 。 

我 在 Android 上 运行 ， 在 iOS 模 拟 器 上 模拟 过 来 。 你 也 可 以 同 Android 模 拟 器 和 iOS 模 拟 器 进行 
测试 。 利 用 如 下 命令 启动 或 者 模拟 应 用 : 


ionic run android -l -c 


也 可 以 这 公用: 


ionic emulate ios -l -c 


1 标记 设置 在 模拟 或 者 运行 中 实时 重新 加 载 ，-C 标记 激活 JavaScript 控 制 台 日 志 输 出 到 命 
令 行 或 者 终端 ? 在 模拟 器 和 设备 上 调试 lonic 应 用 ， 这 两 个 算是 最 有 用 的 标记 了 。 


LI 
jes 


O WP LEVA E 17:00 


IONIC CHAT APP 


Notify people where you are 
with one click location sender 


The Super chat app, lets you 
connect with your friends, share 
images, audio, video, geo- 
location and ofcourse texts! 


Login With Google 
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点 击 Login With Google 的 时 候 ， 会 看 到 Google 授 权 页 如 下 : 
CMT LA * 17:03 


Google Google 


Sign in with your Google Account Sign in with your Google Account 


i © 
lonic User 1 


ionic wad jonic.testuser] @gmail.com 


Need help? 








8.6 测试 


授权 认证 成 功 之 后 ， 将 会 看 到 许可 界面 (下 面 截 屏 的 左边 ) ， 如 果 你 是 回流 用 户 的 话 ， 将 会 
问 你 离线 访问 《下 面 截屏 右边 ) 


e iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... 


- - Carrier F 5:05 PM = 


Google ionic.testuser1 @gmail Google ionic.testuser2@gmail.com 


© > 


~ lonic Chat App would like to: ~ lonic Chat App would like to: 


3 Know who you are on Google ES] Have offline access 


e View your email address 


By clicking Accept, you allow this app and Google to use 
your information in accordance with their respective terms of 
service and privacy policies. You can change this and other 


Account Permissions at any time 
Accept 





在 Android 设 备 上 是 使 用 jonic.testuse1@gmail.com 登 录 的 ， 在 iOS 模 拟 器 上 使 用 的 


是 jonic.testuser2@gmail.com 登 录 的 。 


301 


成 功 登 录 之 后 ， 将 会 显示 用 来 展示 离线 用 户 的 dashboard 标 签 页 ， 如 下 左 。 当 点 击 一 个 用 户 ， 
将 被 带 到 聊天 界面 ， 如 下 右 : 





(OB CIA 5 17:06 
IONIC CHAT APP lonic User 2 


E RIENCIA 


lonic User 2 


onic tectuser2@emailc 3 
lonic.testuser2@gmail.com No messages yet! 


用 户 可 以 通过 在 文本 城中 答 入 信息 然后 点 击 国 国 过 生 未 雪 送 信息 。 然 后 ， 通 过 点 击 more 
图 标 按钮 来 显示 一 个 动作 表单 如 下 左 。 可 以 通过 动作 表单 行为 来 与 其 他 用 户 分 享 图 片 ， 如 下 
m 
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8.6 测试 


6 iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... 


ionk 


lonic User 1 says : 
Hey! 
lonic User 2 says : 
Sup! 


lonic User 1 posted : 


Share Picture 
Take Picture 


Share My Location 
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测 | TA, 


也 可 以 选择 Share My Location 选 项 (3e FE) 来 分 享 地 理 信息 。 其 他 用 户 可 以 在 聊天 界面 里 
面 看 到 (如 下 右 ) 


iOS Simulator - iPhone 6 - iPhone 6 / iOS 8.3... 


lonic User 1 


lonic User 1 says 
Hey! 


lonic User 2 says 
Sup! 


© lonic User 1 posted 


o lonic User 1 shared 


bvie Max * 


Dubai 





Map data ©2015 Google Terms of Use Map Data Terms of Use 


XM Cancel 图 
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8.6 测试 


这 就 是 我 们 的 聊天 应 用 ! 

你 可 以 在 任何 时 间 点 访问 Firebase forge 来 查看 存储 的 数据 。 效 果 大 概 如 下 : 
ionic-chat-app 
— chats 


-— chat. ionic,testuser2@gmail,com_ionic,testuser1 @gmail,com 
© -Jrw91hG-dD87AvFNdbO 
~ -Jrw9FIOHS5NJEKK9GFCf 
~ Jrw9NJX770uG-cpw3pB 
|. content: "<p>Ionic User 1 posted : <br/><img class=\"chat-.. 
= from: "ionic.testuserl@gmail.com 
= time: "5:07 PM" 
| Loipe: tng" 
-— -Jrw9ZkwYUaFwU2waJtP 
= content: "<p>Ionic User 1 shared : <br/> 
H- from: "ionic.testuserl@gmail.com 
-— map 
| | tat: 17.4764583 
| lon: 78.4825107 
bi time: "5:08 PM" 
- type: "geo" 
- onlineUsers 


$- -Jrw8VFDYDIUVw-eBj3H 


Q-— -Jrw8swofzZ5M3WGkCWD 





T 
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本 章 中 ， 我 们 学 会 了 如 何 使 用 lonic，Cordova 以 及 Firebase 来 制作 一 个 简单 的 聊天 应 用 。 我 们 
先 从 理解 结构 开始 ， 之 后 学 习 了 Firebase 和 AngularFire， 然 后 我 们 将 它们 统统 整合 到 lonic 应 
用 中 。 同时 我 们 也 学 习 了 一 些 核心 思想 的 实现 ， 例 如 在 lonic 应 用 中 整合 Cordova 插 件 和 根据 
需求 使 用 不 同 功能 。 

下 一 章 是 最 后 一 张 ， 我 们 将 学 习 如 何 生成 如 此 应 用 的 设备 指定 安装 包 ， 如 何 与 世界 分 享 他 。 
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本 章 中 ， 我 们 将 学 习 三 种 生成 lonic 应 用 安装 包 的 方法 : 一 是 使 用 PhoneGap 构 建 服务 ， 二 是 使 
用 Cordova CLI， 第 三 个 是 使 用 lonic package 服 务 。 我 们 同时 会 为 Android 和 iOS 操 作 系 统 生 
成 安装 包 。 本 章 涵 盖 主 题 如 下 : 


e 生成 图 标 和 预览 图 

e 了 验证 config.xml 

e 使 用 PhoneGap 服 务 生成 安装 包 

e 使 用 Cordova CLI 生 成 安装 包 

e 使 用 lonic package 服 务 生成 安装 包 


预备 应 用 的 分 发 


现在 我 们 成 的 创建 了 我 们 的 lonic 应 用 ， 我 们 想 要 分 发 出 去 。 接 触 大 量 用 户 的 最 佳 方法 是 App 
Stores 但 是 在 分 发 此 应 用 之 前 ， 我 们 需要 为 应 用 制作 特定 的 图 标 和 截屏 。 截 屏 是 可 选 的 ， 根 
据 产 品 理念 而 定 

设置 图 标 也 截屏 

默认， 在 运行 


ionic platform add android 


或 者 : 


ionic platform add ios 


AJAR > CLIA B Ada — 4 x3 > Z A resources o TERA 制作 一 个 聊天 App 中 创 
建 的 jonc-chat-app 中 查看 。 ed ee ，Android 子 文件 来。 他 是 
根据 你 添加 的 平台 生成 的 。 这 些 文件 夹 内 都 是 有 两 个 子 文件 夹 组 成 : icon 和 splash e 


MU id 如 果 不 需要 的 话 ， 删 除 此 
文件 夹 可 以 为 安装 包 节 省 几 个 字 节 


为 生成 图 标 ， 可 以 将 你 的 图 标 做 成 尺寸 大 于 1024*1024， 然 后 利用 以 下 任 一 服务 : 


e http:Wicon.angrymarmot.org/ 
e http://makeappicon.com/ 
e http://www.appiconsizes.com/ 


些 服 务 都 是 用 来 为 Android 和 iOS 生 成 图 标 和 截屏 的 。 
我 跟 这 上 面 的 服务 没有 任何 关系 。 所 以 使 用 过 程 中 出 现任 何 风险 ， 本 人 概 不 负责 。 


另外 ， 你 可 以 将 icon.png 和 splash.png 放 到 resources 文 件 夹 内 然后 运行 


ionic resources 


lonic 将 负责 把 你 的 图 片上 传 到 云 ， 然 后 根据 需求 调整 尺寸 ， us 整 好 尺寸 的 返回 的 图 片 
保存 到 resources 文 件 夹 内 。 如 果 你 只 想 调 整 图 标 ， 使 用 如 下 命 


ionic resources --icon 


9.1 生成 图 标 和 预览 

如 果 只 想 调整 截屏 ， 使 用 如 下 命令 : 
ionic resources --splash 
你 可 以 使 用 这 个 psd 来 设计 你 的 图 


标 : http://code.ionicframework.com/resources/icon.psd 可 以 使 用 这 个 psd 来 设计 截屏 : 
http://code.ionicframework.com/resources/splash.psd 
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3 31 config.xml x 4} 


我 们 已 经 知道 ，config.xml 是 Cordova AP A A P G 4T E CUR. OLY) | ARE — 18 ££ 85 AE o 
此 ， 在 开始 部 署 之 前 一 定 要 验证 好 此 文件 。 可 以 根据 以 下 检查 列表 来 检查 是 否 正 常 : 


e Widget ID 是 否定 义 与 有 效 

e widget 版 本 是 否定 义 且 有 效 

e 未 防 应 用 更 新 ， 更 新 widget 版 本 并 验证 是 否 有 效 

e name 标签 已 定义 且 有 效 

e description 已 定义 且 有 效 

e 作者 (Author) 信息 已 定义 且 有 效 

e Access 标 签 已 定义 且 限 制 到 所 需 的 域名 : https://github.com/apache/cordova-plugin- 
whitelist#network-requestwhitelist 

e 允许 跳 转 的 连接 已 定义 好 且 限 制 到 所 需 的 域名 : https://github.com/apache/cordova- 
plugin-whitelist#intent-whitelist 

e 交叉 检查 (Cross=check) 偏好 设置 

e 交叉 检查 图 标 和 截屏 路 径 

e 交叉 检查 许可 (如果 有 的 话 ) 

e 更 新 jindex.html 的 内 容 安全 策略 元 标签 https://github.com/apache/cordova-plugin- 
whitelist#content-securitypolicy 


验证 完 上 面 的 点 之 后 ， 我 们 就 可 以 开始 生成 安装 包 了 。 


关于 本 章 ， 你 也 可 以 通过 以 下 Github 目 录 来 访问 源 代码 ， 发 起 issue， 与 作者 沟通 : 
https://github.com/learning-ionic/Chapter-9 


PhoneGap/k + 


第 一 个 探索 的 应 用 安装 包 生 成 方式 是 使 用 PhoneGap 构 建 服 务 。 这 应 该 是 最 简单 的 Android 和 
iOS 安 装 包 生成 方式 了 。 


流程 非常 简单 。 我 们 将 整个 项 目 上 传 到 PhoneGap 构 建 服务 他 就 会 负责 构建 安装 包 了 。 


如 果 你 觉得 上 传 整 个 项 目 不 切 实际 ， 你 可 以 只 上 传 wWww 文 件 夹 ; 但 是 ， 需 要 做 以 下 变 

更 : 首先 ， 将 config.xml 移 动 到 www 文 件 夹 内 。 接着 ， 将 resources 文 件 夹 移动 到 Www 文 
件 夹 内 。 最 后 ， 修 改 config.xml 里 面 的 resources 文 件 夹 的 路 径 。 如果 你 发 现 你 经 常 干 这 
件 事情 的 话 ， 建 议 你 写 一 个 脚本 来 生成 一 个 PhoneGap deployable (可 部 署 ) 文件 夹 ， 

用 来 容纳 变更 后 的 项 目 。 


如 果 你 打算 只 发 布 Android 版 本 ， 你 就 不 用 再 做 别 的 操作 了 。 如 果 你 打算 生成 iDOS 安 装 包 ， 那 
么 你 就 需要 一 个 Apple Developer Account (苹果 开发 者 账号 ) 并 遵照 步骤 生成 所 需 证 书 : 
http://docs.build.phonegap.com/en_US/signing_signing-ios.md.html 


你 也 可 以 按照 这 里 来 给 对 你 的 Android 应 用 进行 签名 : 
http://docs.build.phonegap.com/en US/signing signing-android.md.html 


一 旦 得 到 证 书 和 密 钥 ， 你 就 可 以 开始 生成 安装 包 里 。 按 照 以 下 步骤 : 


1. 新 建 一 个 PhoneGap 账 号 并 登录 : https://build.phonegap.com/plans 

2. 接 下 来 ， 导 航 到 https://build.phonegap.com/people/edit ， 选 择 Siging Keys 标 签 页 ， 上 
传 OS 和 Android 证 书 

3， 然 后 ， 导 航 到 https://build.phonegap.com/apps ， 点 击 New App ° 作为 免费 计划 的 一 部 
分 ， 在 他 们 还 从 Pulic Git 资 源 目 录 拉 取 的 时 候 ， 你 可 以 拥有 任意 多 数量 的 app。 你 也 可 以 
通过 Private repo (资源 目录 ) 或 者 上 传 一 个 ZIP 文 件 来 创建 一 个 私有 应 用 。 

4. 为 测试 此 服务 ， 我 们 来 创建 一 个 ,zip 文件 (不 是 .rar 或 者 .7Z) ， 遵 照 如 下 文件 夹 结 构 : 

o App〔 根 文件 来) config.xml resources (文件 来) www (文件 夹 ) 然后 ， 如 前 所 
ik > 更 新 config.xml 
5. 上 传 ZIP 文 件 到 https://build.phonegap.com/apps 点 击 Create app 


将 花费 数 分 钟 来 完成 生成 流程 。 


有 时 候 ， 构 建 服务 会 出 现 错误 。 等 待 之 后 再 重 试 。 根 据 构 建 服务 器 的 负载 ， 构 建 流程 有 
时 候 会 比 预想 的 更 长 。 
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现在 ， 我 们 将 使 用 Cordova CLI 来 生成 Android 和 iOS 安 装 包 


Android 安 装 包 
首先 来 看 Android 安 装 包 的 生成 。 步 骤 如 下 : 


1. 在 项 目的 根 目 录 下 打开 终 令 行 

2.， 移 除 不 需要 的 插件 : ionic ae rm cordova-plugin-console 

3， 以 发 布 模式 构建 应 用 : cordova build --release android 。 将 会 
在 /platforms/android/build/outputs/apk/android-release-unsigned.apk 生 成 一 个 未 签名 的 
安装 包 

4. 接 下 来 ， 我 们 需要 制作 一 个 签名 密 钥 。 如 果 已 经 有 了 的 话 或 者 你 是 更 新 一 个 已 有 的 app 的 
话 ， 可 以 直接 进行 到 第 六 步 

5. 使 用 密 铀 工具 "ane: o . SNe , D 密 钥 都 将 存放 在 
此 。 文件 夹 创建 好 了 之 后 ， 通 过 ca 命令 进入 到 此 文件 夹 ， 然 后 运 


keytool -genkey -v nlt MAREM EN MD -alias alias name - 
keyalg RSA -keysize 2048 -validity 10000 
然后 你 将 被 问 到 如 下 问题 ， 你 可 以 如 下 回答 : 


+ deploy-keys keytool -genkey -v -keystore app-name-release-key.keystore -alias my-ionic-app -keyalg RSA ~ 
keysize 2048 -validity 10000 
Enter keystore password: 
Re-enter new password: 
What is your first and last name? 
[Unknown]: Arvind Ravulavaru 
What is the name of your organizational unit? 
[Unknown]: Stack Engineering 
What is the name of your organization? 
[Unknown]: JackalStack Technologies Pvt. Ltd. 
What is the name of your City or Locality? 
[Unknown]: Hyderabad, India 
What is the name of your State or Province? 
[Unknown]: Andhra Pradesh 
What is the two-letter country code for this unit? 
[Unknown]: IN 
Is CN=Arvind Ravulavaru, OUsStack Engineering, O=JackalStack Technologies Pvt. Ltd., L="Hyderabad, India", S 
T=Andhra Pradesh, C=IN correct? 
[no]: YES 


Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 10,000 days 


for: CN-Arvind Ravulavaru, OU=Stack Engineering, O=JackalStack Technologies Pvt. Ltd., L="Hyderabad, 
India", ST=Andhra Pradesh, C=IN 


Enter key password for «my-ionic-app» 
(RETURN if same as keystore password): 
[Storing app-name-release-key. keystore] 





如 果 你 丢失 了 此 文件 或 者 忘记 别名 或 者 密码 的 话 ， 你 将 永远 不 能 像 app store 提 交 
新 了 ， 永 远 。 


6. TAPK : 你 可 以 将 android-release-unsigned.apk 拷 贝 到 deploy-key 文 件 夹 ， 然 后 运行 
在 其 中 运行 下 面 的 命令 。 但 是 ， 我 还 是 他 这 些 文件 留 在 他 们 原先 的 位 置 。 


7. 接 下 来 ， 使 用 /arsigner 工 具 ， 给 未 签名 的 APK 签 名 : Jarsigner -verbose -sigalg 
SHA1withRSA -digestalg SHA1 - keystore app-name-release-key.keystore 
../platforms/android/build/outputs/apk/android-releaseunsigned.apk my-ionic-app 
这 个 过 程 将 会 问 到 你 密码 ， 也 就 是 创建 keystore 第 一 步 输入 的 。 一 旦 签名 流程 完 
成 ，android-release-unsigned.apk 将 被 同名 的 签名 版 蔡 换 掉 。 


以 上 命令 在 deploy-keys 文 件 夹 内 运行 


8. 最 后 ， 我 们 运行 Zipalign 来 优化 APK ° zipalign -v 4 
../platforms/android/build/outputs/apk/androidrelease-unsigned.apk my-ionic- 
app.apk 


以 上 命令 将 会 在 deploy-keys 里 面 创建 一 个 my-ionic-app.apk。 
现在 ， 你 可 以 将 APK 投 放 到 app store 了 。 


iOS 安 装 包 
接 下 来 ， 我 们 将 使 用 Xcode 来 为 IOS 生 成 安装 包 。 执 行 如 下 步骤 即 可 : 


在 项 目 根 目录 下 打开 命令 行 /终端 

移 除 不 需要 的 插件 : ionic plugin rm cordova-plugin-console 

运行 : ionic build -release ios 

导航 到 platform/ios 3. fF 3« > 1% M Xcode È ^ projectname.xcodeproj 

一 旦 项 目 导 入 Xcode 完 成 ， 选 择 了 iOS Device 之 后 ， 从 导航 菜单 中 选择 Product， 然 
后 Archive 


ak WN > 


如 果 Archive 选 项 没有 激活 ， 参 考 : http://stackoverflow.com/a/18791703 


6. 接 下 来 ， 在 导航 菜单 中 选择 Window 然 后 选择 Organizer。 你 将 会 看 到 一 系列 创建 好 的 结 
构 体 。 


7， 点击 你 现在 已 经 创建 好 的 结构 体 的 缩 略图 ， 点 击 Submit to App Store。 将 会 验证 你 的 账 
户 然 后 应 用 将 上 传 到 Apple Store ° 
8. 最后， 登录 Apple Store 设 置 截屏 ， 描 述 ， 等 等 。 
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lonic package 


编写 本 书 的 时 候 ，lonic package 任 务 还 是 beta 版 。 因 此 ， 我 最 后 才 讲 他 。 


将 项 目 上 传 到 |onic 云 
使 用 lonic 云 服务 生成 安装 包 非 常 简单 。 首 先 ， 使 用 如 下 命令 将 应 用 上 传 到 我 们 的 lonic 账 号 : 


ionic upload 


在 执行 上 面 的 命令 之 前 先 登录 lonic 账 号 。 如 果 你 的 项 目 有 敏感 信息 的 话 ， 在 将 应 用 上 伟 
到 云 服 务 之 前 与 lonic 许 可 证 交叉 对 比 


一 旦 应 用 上 传 成 功 ， 将 会 为 你 的 应 用 生成 一 个 app ID。 你 可 以 在 项 目 根 目录 下 的 jonic.project 
中 找到 app ID ° 
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按照 Android 安 装 包 部 分 的 第 五 步 ， 生 成 Keystore 文 件 。 
接 下 来 ， dos om 令 来 生成 安装 包 ， 如 下 : 


ionic package «options» [debug | release] [ios | android] 


有 如 下 可 用 选项 : 


package [options] «MODE» «PLATFORM» Package an app using the Ionic Build service (beta) 
«MODE» "debug" or "release" 
«PLATFORM» "ios" or "android" 
[--android-keystore-file|-k] Android keystore file 
[--android-keystore-alias|-a] .... Android keystore alias 
[--android-keystore-password|-w] . Android keystore password 
[--android-key-password|-r] Android key password 
[--ios-certificate-file|-c] iOS certificate file 


[--ios-certificate-password|-d] .. 10S certificate password 
[--ios-profile-file|-f] iOS profile file 

[--output |-0] Path to save the packaged app 
[--no-email.|-n] Do not send a build package email 
[--clear-signing|-1l] Clear out all signing data from Ionic server 
[--email|-e] Ionic account email 

[--password|-p] Ionic account password 





例如 ， 如 果 你 想 生 成 一 个 Android 发 布 版 : 


ionic package release android -k app-name-release-key.keystore -a myionic-app -w 12345 
678 -r 12345678 -0 ./ -e arvind.ravulavaru@gmail.com -p 12345678 


我 们 在 deploy-keys 文 件 夹 内 运行 此 命令 


同样 ， 对 于 iOS : 


ionic package release ios -c certificate-file -d password -f profilefile -0 ./ -e arvi 


nd.ravulavaru@gmail.com -p 12345678 


ionic package 4- 4€ lonic CLI 1.5.2 P CAG » 48 X48 REF : 
https://github.com/driftyco/ionic-cli/issues/2 1 4#issuecomment-109349399 
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完成 这 些 之 后 ， 我 们 的 lonic 之 旅 就 正式 结束 了 。 快 速 总 结 一 下 ， 我 们 从 了 解 为 何 使 用 

AngularJS 开 始 。 然后 ， 我 们 学 习 了 移动 混合 应 用 如 何 运行 ，Cordova 和 lonic 可 以 用 在 哪里 。 

接 下 来 ， 我 们 学 习 了 大 量 的 lonic 模 板 然后 快速 浏览 了 lonic CSS 组 件 ，lonic 指 令 以 及 服务 

我 们 利用 这 些 知 识 为 一 个 secure REST API 制 作 了 一 个 lonic 客 户 端 。 接着 ， 我 们 学 习 了 

Cordova 和 ngCordova， 以 及 如 何 使 用 它们 。 我 们 利用 lonic 与 Cordova 的 长 处 制作 了 一 个 聊天 

应 用 。 有 最后， 我 们 学 习 如 何 为 制作 好 的 应 用 生成 安装 包 并 发 布 到 app store 。 


附加 主题 与 贴 士 


本 书 的 主要 目的 是 让 你 尽 可 能 的 熟悉 lonic。 所 以 ， 从 第 一 章 到 第 九 章 ， 我 从 Cordova ， 
AngularJS，lonic 基 本 知识 开始 ， 逐 步 深入 。 


在 此 附录 中 ， 我 们 将 探索 其 他 一 些 Ilonic CLI : ionc.io > ionic-box 和 Sublime Text 插件 


关于 本 章 ， 你 也 可 以 通过 以 下 Github 目 录 来 访问 源 代码 ， 发 起 issue， 与 作者 沟通 : 
https://github.com/learning-ionic/Appendix 


lonic CLI 


lonic CLI 越 来 越 强大 了 。 写 作 此 书 的 时 候 ， 最 新 的 |lonic CLI 版 本 是 1.5.5。 本 书 使 用 的 是 |onic 
1.5.0. 


lonic 登 录 


有 三 种 方法 登录 ionic 云 服务 。 
第 一 种 ， 有 提醒 的 : 


ionic login 
第 二 种 ， 没 有 提醒 的 : 


ionic login --email arvind.ravulavaru@gmail.com --password 12345678 


最 后 ， 使 用 环境 变量 。 可 以 设置 /ONIC_EMA 人 L 和 /1ONIC_PASSWORD 环 境 变量 ，lonic CLIA 
不 用 任何 提醒 ， 自 己 去 获取 。 但 是 这 么 做 很 不 安全 ， 因 为 密码 赤裸 裸 的 展示 为 普通 文本 。 


首先 你 的 有 一 个 lonic.io 账 号 ， 和 否则 登录 不 会 成 功 的 


lonic 开 始 任务 


首先 ， 我 们 看 一 下 No Cordova 标 记 选 项 。 


No Cordova? 12 


ionic start 任务 是 最 简单 的 创建 lonic 应 用 的 方法 之 一 。 本 书 中 ， 我 们 已 经 多 次 用 过 。 但 是 ， 我 
们 知道 ，lonic 可 以 不 用 Cordova。 

想 要 不 依赖 Cordova 的 依赖 的 话 ， 在 使 用 ionic start 的 时 候 就 需要 添加 一 个 -w 标记 或 者 -no- 
cordova 标记 : 


ionic start -a "My Mobile Web App" -i app.web.mymobile -w myMobileWebApp maps 


生成 的 项 目 结构 如 下 : 


L— myMobileWebApp 
l— bower.json 
I— gulpfile.js 
l— ionic.project 
l— package.json 


| scss 


L— ionic.app.scss 
| PP 
L— www 

| 一 css 

| 一 img 


|— index.html 


| 一 js 
|— lib 


L— templates 


接着 ， 和 往常 一 样 使 用 cd 命令 ， 进 入 myMobileWebApp 运行 ionic serve » 
新 建 项 目的 时 候 附 加 SCSS 支 持 
新 建 项 目 默 认 附 加 SCSS 支 持 ， 可 以 在 使 用 ionic start 的 时 候 ， 添 加 -s 或 者 -sass 标记 : 


ionic start -a "Example 1" -i app.one.example --sass example1 blank 


列 出 所 有 lonic 模 板 
想 要 查看 所 有 的 可 用 模板 ， 运 行 jonic start 的 时 候 添加 -| 或 者 --list 标记 : 


ionic start -1 


到 本 书 编写 的 今天 为 止 ， 有 以 下 可 用 模板 : 


blank vosasseaenssres A blank starter project for Ionic 

complex-list ......... A complex list starter template 

MAPS ....-2cccooccoooe An Ionic starter project using Google Maps and a 
Side menu 

salesforce ........... A starter project for Ionic and Salesforce 
FFE.) 2222.5 A starting project for Ionic using a side menu 
with navigation in the content area 

tab loose oo eon A starting project for Ionic using a simple tabbed 
interface 

CORED owe wie wessnn wi A test of different kinds of page navigation 


在 编写 本 书 的 今天 ，complex-list 模 板 还 是 个 空白 模板 ，tests 模 板 是 ionic 团 队 内 部 测试 使 
用 的 。 


App ID 

如 果 你 在 使 用 lonic 云 服务 的 话 ， 那 么 你 在 云 服 务 上 创建 的 每 个 项 目 都 会 指派 一 个 app ID (X 
体 参 考 下 面 的 /onic.io 应 用 部 分 ) » app ID 将 会 保存 在 根 目录 下 的 的 jionic.project 文 件 里 。 

当 你 新 建 一 个 项 目的 时 候 ，app ID 是 空 的 。 如 果 想 将 新 搭建 的 项 目 关联 到 云端 已 有 的 应 用 上 
的 话 ， 可 以 运行 jonic stat 附加 --ion-app-id 标 记 并 传 入 云 服务 生成 的 app ID : 


ionic start -a "Example 2" -i app.two.example --io-app-id "b82348b5" example2 blank 


此 时 ，jonic.project 是 这 样子 的 : 


"name": "Example 2", 
"app id": "b82348b5" 


lonic link 
本 地 创建 的 项 目 可 以 通过 以 下 命令 连接 到 一 个 云端 项 目 (具体 参考 /onijic.jo 应 用 部 分 ) 


ionic link b82348b 


也 可 以 通过 以 下 命令 移 除 已 有 的 app ID: 


ionic link --reset 


lonic info 
想 要 查看 已 安装 的 依赖 包 和 他 们 的 版 本 号 ， 运 行 


ionic info 


列 出 的 信息 应 该 是 这 样 的 : 

Cordova CLI: 5.0.0 

Gulp version:  CLI version 3.8.11 
Gulp local: 

Ionic Version: 1.0.0 

Ionic CLI Version: 1.5.0 

Ionic App Lib Version: 0.1.0 
ios-deploy version: 1.7.0 

ios-sim version: 3.1.1 

OS: Mac OS X Yosemite 

Node Version: v0.12.2 

Xcode version: Xcode 6.3.2 Build version 6D2105 


" ak 
lonicZs 1x 
除了 可 以 使 用 start 任 务 查 看 可 用 模板 之 外 ， 也 可 以 通过 templates 任 务 来 查看 可 以 模板 : 


ionic templates 


lonic browsers 


= 


x 


B 2 


lonic 黑 认 使 用 操作 系统 的 默认 浏览 器 泻 染 webview 的 。 想 要 获取 更 好 的 用 户 体 验 或 者 使 用 最 
新 特性 的 话 ， 你 可 以 将 默认 的 浏览 器 替换 为 Crosswalk(〈 https://crosswalkproject.org/ ) 或 者 
Crosswalk Lite ( (https://github. ona AGRO 

Project-Lite ) 。 目前 ， 只 能 使 用 这 两 个 浏览 器 。 可 以 通过 以 下 命令 查看 当前 支持 的 浏览 器 : 


ionic browser list 


然后 ， 会 看 到 : 

iOS - Browsers Listing: 

Not Available Yet - WKWebView 
Not Available Yet - UIWebView 


Android - Browsers Listing: 
Available - Crosswalk - ionic browser add crosswalk 
Version 8.37.189.14 
Version 9.38.208.10 
Version 10.39.235.15 
Version 11.40.277.7 
Version 12.41.296.5 
(beta) Version 13.42.319.6 
(canary) Version 14.42.334.0 


Available - Crosswalk-lite - ionic browser add crosswalk-lite 
(canary) Version 10.39.234. 
(canary) Version 10.39.236.1 


Available - Browser (default) - ionic browser revert android 


Not Available Yet - GeckoView 


你 将 看 到 ， 目 前 还 不 支持 WKWebView 和 UIWebView。 但 是 对 于 Android 应 用 ， 你 可 以 使 用 
Crosswalk。 想 要 给 已 有 项 目 (Example 3) 添加 Crosswalk 的 话 ， 运 行 : 


ionic browser add crosswalk 


一 旦 浏览 器 添加 成 功 ， 可 以 查看 jonic.project 文 件 进 行 验证 。 
想 要 还 原 默 认 的 浏览 器 的 时 候 ， 运 行 : 


ionic browser revert android 


lonic lib 
可 以 通过 以 下 命令 更 新 到 最 新 的 lonic 库 版 本 : 


ionic lib update 


也 可 以 传 入 指定 的 版 本 号 : ionic lib update -v 1.0.0-rc.1 


lonic state 


你 可 以 通过 lonic state 任 务 来 管理 项 目的 状态 。 这么 说 吧 ， 你 正在 你 的 lonic 应 用 中 添加 一 些 
插件 和 平台 以 进行 测试 ; 但 是 你 不 想 在 他 们 测试 失败 的 之 后 还 使 用 他 们 。 在 这 样 的 情况 下 ， 
你 就 可 以 用 save 和 [restore 任 务 了 。 

你 可 以 通过 添加 --nosave 标 记 来 避免 将 这 些 插 件 和 平台 保存 到 package.json : 


ionic plugin add cordova-plugin-console --nosave 


在 插件 和 平台 (这 些 插 件 和 平台 添加 的 时 候 使 用 了 --nosave 标 记 ) 测试 正常 之 后 。 如 果 此 时 想 
要 将 他 们 添加 到 package.json 的 话 ， 运 行 如 下 命令 


ionic state save 


这 个 命令 将 会 查找 你 已 经 安装 的 插件 和 平台 ， 然 后 将 所 需 的 信息 添加 到 package.json 文 件 。 
可 以 通过 添加 --plugins 标 记 或 者 --platform* 标 记 来 指定 只 保存 插件 或 者 平台 。 
如 果 添 加 的 插件 和 平台 不 能 如 预期 运行 ， 那 么 可 以 通过 以 下 命令 还 原 项 目 到 之 前 的 状态 : 


ionic state reset 


如 果 想 恢复 应 用 的 Cordova 插 件 和 平台 的 话 ， 可 以 在 package.json 里 面 更 新 然后 运行 


ionic state restore 


reset 任 务 删除 platforms 和 plugins 文 件 夹 然后 重新 安装 ，restore 只 是 恢复 platforms 和 
plugins 文 件 夹 里 面 缺 失 的 平台 和 插件 。 
lonic ions 


根据 ions CLI : 


"lonic ions are a curated collection of useful addons, components, and ux interactions 
for extending ionic." lonic ions 是 一 个 设计 好 的 用 于 扩展 ionic 的 插件 ， 组 件 以 及 用 户 交 互 
的 集合 。 


截至 本 书 编写 的 今日 为 止 ， 还 只 有 4 个 ions。 可 以 通过 以 下 命令 查看 ijons 列 表 : 


ionic ions 


将 会 出 现 如 下 选项 : 
Header Shrink ........ 'ionic add ionic-ion-header-shrink' 
A shrinking header effect like Facebook's 


Android Drawer ....... 'ionic add ionic-ion-drawer' 


Android-style drawer menu 


iOS Rounded Buttons .. 'ionic add ionic-ion-ios-buttons' 


iOS "Squircle" style icons 


Swipeable Cards ...... 'ionic add ionic-ion-swipe-cards' 
Swiping interaction as seen in Jelly 


Tindar CarOdm ses a0 ave ‘ionic add ionic-ion-tinder-cards' 


Tinder style card swiping interaction 


你 可 以 通过 输出 结果 里 面 展 示 的 Add 任 务 添加 ion。 一 旦 添加 完成 ， 我 们 就 可 以 去 wwwNib/ 下 对 
应 的 ion 文 件 夹 内 查看 此 组 件 。 

例如 ， 当 我 们 新 建 一 个 空白 项 目 (example4) 的 时 候 ， 我 们 可 以 通过 以 下 命令 添加 Swipe 
Card : 


ionic add ionic-ion-swipe-cards 


此 时 ， 进 入 www/lib/ionic-ion-swipe-cards 文 件 夹 就 可 以 找到 对 应 的 bower 组 件 来 。 
在 example14 文 件 夹 内 ， 可 以 找到 更 多 的 设置 信息 。 
可 以 通过 以 下 命令 移 除 ion : 


ionic rm ionic-ion-swipe-cards 


ionic aqd 和 ionic mm 任务 也 可 以 用 作 添 加 和 移 除 bower 包 。 


lonic resources 


妆 你 添加 一 个 新 平台 的 时 候 ， 默 认 会 为 新 平台 创建 一 个 resources 文 件 夹 ， 且 包含 图 标 和 截 
屏 。 这 些 图 标 和 截屏 都 是 默认 的 图 片 。 如 果 想 为 项 目 使 用 你 自己 的 标志 或 者 图 片 ， 你 只 需要 
运行 lonic resources 任 务 就 可 以 了 。 

这 个 任务 将 会 在 resources 文 件 夹 内 查找 一 个 名 为 jcon.png 的 图 片 用 以 为 此 操作 系统 的 所 有 设 
备 制作 图 标 ，resources 文 件 夹 里 面 的 Splash.png 用 以 为 此 操作 系统 的 所 有 设备 生成 截屏 。 

你 可 以 将 这 两 个 图 片 替 换 为 你 自己 特色 的 图 片 ， 然 后 运行 : 


ionic resources 


如 果 只 想 转 换 图 标的 话 ， 传 入 -i 标记 ， 如 果 只 想 转换 截屏 的 话 ， 传 入 -Ss 标记 。 


同时 ， 你 也 可 以 使 用 .png, osd (样本 范例 : 
http://code.ionicframework.com/resources/icon.psd 与 
http://code.ionicframework.com/resources/splash.psd) ， 或 者 .aj 文件 来 生成 图 标 。 更 
多 信息 ， 参 考 : http://blog.ionic.io/automating-icons-and-splash-screens/ 


lonic server, emulate, run 


lonic 提 供 了 简单 的 方法 用 于 在 浏览 器 ， 模 拟 器 以 及 设备 上 运行 应 用 。 这 三 个 方法 都 有 很 多 有 
s 选项 。 

想 要 像 在 监 实 设备 上 那样 在 模拟 器 上 实时 重 载 ， 那 么 在 调试 的 时 候 ， 使 用 -| 标记 实现 实时 
, 人 错误 输出 。 这 是 在 lonic CLI 中 至 今 使 用 最 好 和 最 广 的 工具 
方法 。 这 个 任务 为 了 节省 了 大 量 的 调试 时 间 : 


ionic serve -l -c 
ionic emulate -1 -c 
ionic run -l -c 


以 下 是 用 在 jomic serve 中 的 可 用 选项 : 


serve [options] Start a local development server for app dev/testing 


[--consolelogs|-c] Print app console logs to Ionic CLI 

[--serverlogs|-s] Print dev server logs to Ionic CLI 

[--port|-p] Dev server HTTP port (8100 default) 
[--livereload-port|-r] Live Reload port (35729 default) 

[ --nobrowser |-b] Disable launching a browser 

[--nolivereload|-d] Do not start live reload 

[--noproxy | -x] Do not add proxies 

[--address] Use specific address or return with failure 

[--all|-a] Have the server listen on all addresses (0.0.0.0) 
[--browser | -w] Specifies the browser to use (safari, firefox, chrome) 
[--browseroption|-o] Specifies a path to open to (/#/tab/dash) 

[--lab|-1] .. Test your apps on multiple screen sizes and platform types 
[--nogulp] .. Disable running gulp during serve 

[--platform|-t] Start serve with a specific platform (ios/android) 





如 果 你 的 应 用 在 Android 和 iOS 有 不 同 的 显示 效果 的 时 候 ， 可 以 通过 以 下 命令 同时 测试 : 


ionic serve -1 


你 可 以 自己 学 着 探索 一 下 上 面 提供 的 选项 。 当 使 用 ionic run 和 emulate 的 时 候 ， 可 以 使 用 以 下 
选项 : 


run [options] «PLATFORM» Run an Ionic project on a connected device 
[--livereload|-1] Live reload app dev files from the device (beta) 
[--port|-p] Dev server HTTP port (8100 default, livereload req.) 
[--livereload-port|-r] Live Reload port (35729 default, livereload req.) 
[--consolelogs|-c] Print app console logs to Ionic CLI (livereload req.) 
[--serverlogs|-s] Print dev server logs to Ionic CLI (livereload req.) 
[--debug| --release] 
[--device|--emulator|--targetzF00] 


emulate [options] «PLATFORM» Emulate an Ionic project on a simulator or emulator 
[--livereload|-1] Live reload app dev files from the device (beta) 
[--port|-p] Dev server HTTP port (8100 default, livereload req.) 
[--livereload-port|-r] Live Reload port (35729 default, livereload req.) 
[--consolelogs|-c] Print app console logs to Ionic CLI (livereload req.) 
[--serverlogs|-s] Print dev server logs to Ionic CLI (livereload req.) 
[--nohooks | -n] Do not add default Ionic hooks for Cordova 
[--debug| --release] 
[--device|--emulator|--target-F00] 





自述 性 非常 的 好 。 

lonic upload 和 share 

可 以 通过 如 下 命令 将 你 的 lonic 项 目 上 传 到 你 的 lonic.io 账 户 : 
ionic upload 


使 用 这 个 功能 需要 一 个 lonic.io 账 户 


应 用 上 传 成 功 之 后 ， 就 可 以 通过 https://apps.ionic.io/apps 来 查看 新 传 的 app。 可 以 通过 share 
命令 来 与 他 人 分 享 这 个 应 用 ， 分 享 需要 传 入 分 享 对 象 的 邮件 地 址 ; 例如 : 


ionic share arvind.ravulavaru@gmail.com 


lonic view 


可 以 通过 lonic view 在 设备 上 预览 你 的 应 用 。 一 旦 应 用 上 传 到 你 的 lonic.io 账 户 ， 你 可 以 在 
Android #iOS = TF #lonic View 应 用 然后 在 设备 上 预览 应 用 。 


更 多 lonic View 的 信息 ， 参 考 : http://view.ionic.io/ 


lonic help 和 docs 


任何 时 间 点 ， 你 都 可 以 通过 如 下 命令 查看 所 有 的 lonic CLI 任 务 列表 : 


ionic -h 


可 以 通过 如 下 命令 打开 ionic 文 档 : 


ionic docs 


想 要 查看 可 用 文档 ， 运 行 : 


ionic docs ls 


想 要 打开 指定 文档 (4eionicBody) ， 运 行 : 


ionic docs ionicBody 


lonic Creator 


lonic Creator 是 一 个 用 来 轻松 搭建 lonic UI 的 工具 。 
工具 。 使 用 这 个 工具 需要 一 个 lonic.io 账 号 。 


导航 到 http://creator.ionic.io/ 开始 使 用 此 


有 了 lonic Creator， 你 可 以 通过 拖 动 放置 lonic 组 件 来 创建 应 用 原型 。 这 个 应 用 是 存放 在 云端 


的 ， 你 可 以 随时 访问 并 更 改 。 


设计 app 中 的 lonic Creator 截 屏 : 


€ c creator.ionic io/app/designer/c45Sac24bd22 1 


test 


Username 


Password 


COMPONENTS 


Ca [一 


完成 设计 之 后 ， 可 以 通过 以 下 三 种 方法 来 下 载 你 的 app : 





LINK 


Menu - / 


FULL WIDTH 


e 第 一 个 ， 使 用 lonic CLI : ionic start [appName] creator:c45ac24bd221 


e 第 二 个 ， 下 载 项 目的 ZIP 文 件 


e 最 后 个 ， 下 载 纯 HTML 


可 以 通过 点 击 左上 角 的 (导出 ) 按钮 看 到 这 些 选项 。 


更 多 关于 lonic Creator 信 息 ， 参 考 : http://thejackalofjavascript.com/ionic-creator-beta/ 


lonic.io 应 用 


你 可 以 在 https://apps.ionic.io/apps 创建 和 管理 你 的 lonic 应 用 。 在 之 前 的 任务 中 ， 我 们 使 用 
的 app ID 都 是 我 们 通过 https://apps.ionic.io/apps 接口 创建 项 目的 时 候 生 成 的 app ID © 

可 以 通过 https://apps.ionic.io/apps 页 面 上 的 New App 按 钮 来 创建 一 个 新 的 app。 app 创 建 完 
成 之 后 ， 点 击 app 的 名 字 就 可 以 看 到 app 的 详细 信息 了 。 

在 app 详 细 信息 页 面 上 点 击 Settings 可 以 更 新 app 设 置 。 


可 以 此 页 面 上 查看 lonic 应 用 的 设置 : http://docs.ionic.io/v1.0/docs/io-quick-start 截至 本 
书 编写 之 日 ， 使 用 Ionic Creator 创 建 的 app 都 没有 出 现在 https://apps.ionic.io/apps 


lonic Push 


可 以 通过 添加 Push 插 件 (https://github.com/phonegap-build/PushPlugin ) 并 进行 配置 来 给 
你 的 lonic 应 用 添加 推送 消息 。 也 可 以 通过 使 用 lonic 的 推送 模板 来 达成 : 


ionic add ionic-service-core 

ionic add ionic-service-push 

ionic start myPushApp push 

cd myPushApp 

ionic plugin add https://github.com/phonegap-build/PushPlugin.git 
ionic upload 


现在 ， 返 回 app.ionc.io 页 面 的 时 候 ， 上 点击 之 前 应 用 的 设置 。 在 www/js/app.js 的 config 部 分 ， 你 
可 以 看 到 之 前 在 应 用 设置 页 面 做 的 改动 : 


.config(['$ionicAppProvider', function($ionicAppProvider) { 
// Identify app 
$ionicAppProvider.identify({ 
// The App ID for the server 
app id: 'YOUR APP ID', 
// The API key all services will use for this app 
api key: 'YOUR PUBLIC API KEY' 
}); 
}]) 


然后 ， 你 可 以 按照 Android 推 送 设置 引导 ((http://docs.ionic.io/v1.0/docs/push-android- 
setup) 或 者 iDOS 推 送 设置 引导 (http://docs.ionic.io/v1.0/docs/push-ios-setup) 实现 推送 消 
息 。 


更 多 关于 给 应 用 整合 推送 消息 的 详细 信息 ， 请 参考 : http://docs.ionic.io/v1.0/docs/push- 
from-scratch 


lonic Deploy 


lonic Deploy — ^-lonic.io/K 4- » lonic 可 以 让 你 部 署 新 的 变更 而 不 用 调教 的 App Store o 这 样 
就 为 开发 者 想 用 户 推送 新 的 变更 节省 了 大 量 的 时 候 。 
不 需要 更 新 安装 包 的 的 变更 只 能 被 推送 -例如 ，HTML，CSS,JavaScript 和 图 片 资源 
截至 本 书 编写 之 日 ，lonic Deploy 还 是 Alpha 状 态 。 
参 


是 
更 多 关于 lonic deploy 的 信息 ， 参 考 : http://blog.ionic.io/announcing-ionic-deploy-alpha- 


update-your-appwithout-waiting/ 和 http://docs.ionic.io/v1.0/docs/deploy-from-scratch 


lonic Vagrant box 


如 果 你 的 项 目 有 多 个 成 员 ， 每 个 成 员 使 用 不 用 环境 开发 lonic 应 用 ， 可 以 通过 |onic Vagrant box 
来 统一 大 家 的 开发 环境 。 


如 果 不 懂 Vagrant， 查 阅 : http://vagrantup.com 更 多 关于 ionic-box 的 信息 ， 参 考 : 
https://github.com/driftyco/ionic-box 


lonic Sublime Texti& 4+ 


如 果 你 是 Sublime 用 户 ， 想 自动 补 齐 lonic 肢 本， 那么 可 以 安装 以 下 包 : 


e lonic snippets: https://packagecontrol.io/packages/lonic%20Snippets 

e lonic Framework snippets: 
https://packagecontrol.io/packages/lonic%20Framework%20Snippets 

e lonic Framework Extended Autocomplete: 
https://packagecontrol.io/packages/lonic%20Framework%20Extended%20Autocomplet 
e 


Bo 


NP 


CD 
NO 
O 


完成 这 些 之 后 ， 我 们 就 正式 完结 Learning lonic T » 希望 你 能 够 像 我 这 么 卖力 的 讲解 lonic 这 
样 卖力 的 去 喜欢 Learning lonic 。 


4 89 4244 : https://twitter.com/arvindr21 我 的 Github : https://github.com/arvindr21 (4 X ik 
的 公开 在 此 ， 原 文 : shameless publicity :D) 


青山 不 改 ， 绿 水 长 流 ， 再 见 ， 谢 谢 | 
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